@extends(backpack_view('blank'))
<style>
    .swal-footer {
        text-align: center;
    }

    .swal-modal .swal-text {
        text-align: center;
    }
</style>
@php
    $defaultBreadcrumbs = [
        trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
        $crud->entity_name_plural => url($crud->route),
        trans('backpack::crud.list') => false,
    ];
    
    // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
    $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('header')
    <div class="container-fluid">
        <h2>
            <span class="text-capitalize">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</span>
            <small id="datatable_info_stack">{!! $crud->getSubheading() ?? '' !!}</small>
        </h2>
    </div>
@endsection

@section('content')
    <!-- Default box -->
    <div class="row">
        @if ($crud->entity_name_plural == 'Project Defects')
            @php
                $project_id = \Route::current()->parameter('project_id');
                $project = \App\Models\Project::findOrFail($project_id);
            @endphp
            <div class="col-md-8 ml-3">
                <div class="row ytd-sales">
                    <div class="col-md-12">
                        <table class="table table-sm table-borderless">
                            <tbody>
                                <tr>
                                    <td>Project Number</td>
                                    <td>{{ $project->project_no }}</td>
                                </tr>
                                <tr>
                                    <td>Client Name</td>
                                    <td>{{ $project->client_name }}</td>
                                </tr>
                                <tr>
                                    <td>Address</td>
                                    <td>{{ $project->road_no }} {{ $project->road_name }} {{ $project->block_no }}
                                        {{ $project->residence }} {{ $project->postal_code }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        @endif
        <!-- THE ACTUAL CONTENT -->
        <div class="{{ $crud->getListContentClass() }}">

            <div class="row mb-0">
                <div class="col-sm-6">
                    @if ($crud->buttons()->where('stack', 'top')->count() || $crud->exportButtons())
                        <div class="d-print-none {{ $crud->hasAccess('create') ? 'with-border' : '' }}">

                            @include('crud::inc.button_stack', ['stack' => 'top'])

                        </div>
                    @endif
                </div>
                <div class="col-sm-6">
                    <div id="datatable_search_stack" class="mt-sm-0 mt-2 d-print-none"></div>
                </div>
            </div>

            {{-- Backpack List Filters --}}
            @if ($crud->filtersEnabled())
                @include('crud::inc.filters_navbar')
            @endif

            <table id="crudTable" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2"
                cellspacing="0">
                <thead>
                    <tr>
                        {{-- Table columns --}}
                        @foreach ($crud->columns() as $column)
                            <th data-orderable="{{ var_export($column['orderable'], true) }}"
                                data-priority="{{ $column['priority'] }}" {{--

                        data-visible-in-table => if developer forced field in table with 'visibleInTable => true'
                        data-visible => regular visibility of the field
                        data-can-be-visible-in-table => prevents the column to be loaded into the table (export-only)
                        data-visible-in-modal => if column apears on responsive modal
                        data-visible-in-export => if this field is exportable
                        data-force-export => force export even if field are hidden

                    --}} {{-- If it is an export field only, we are done. --}}
                                @if (isset($column['exportOnlyField']) && $column['exportOnlyField'] === true) data-visible="false"
                      data-visible-in-table="false"
                      data-can-be-visible-in-table="false"
                      data-visible-in-modal="false"
                      data-visible-in-export="true"
                      data-force-export="true"
                    @else
                      data-visible-in-table="{{ var_export($column['visibleInTable'] ?? false) }}"
                      data-visible="{{ var_export($column['visibleInTable'] ?? true) }}"
                      data-can-be-visible-in-table="true"
                      data-visible-in-modal="{{ var_export($column['visibleInModal'] ?? true) }}"
                      @if (isset($column['visibleInExport']))
                         @if ($column['visibleInExport'] === false)
                           data-visible-in-export="false"
                           data-force-export="false"
                         @else
                           data-visible-in-export="true"
                           data-force-export="true" @endif
                            @else data-visible-in-export="true" data-force-export="false" @endif
                        @endif
                        >
                        {!! $column['label'] !!}
                        </th>
                        @endforeach

                        @if ($crud->buttons()->where('stack', 'line')->count())
                            <th data-orderable="false" data-priority="{{ $crud->getActionsColumnPriority() }}"
                                data-visible-in-export="false">{{ trans('backpack::crud.actions') }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        {{-- Table columns --}}
                        @foreach ($crud->columns() as $column)
                            <th>{!! $column['label'] !!}</th>
                        @endforeach

                        @if ($crud->buttons()->where('stack', 'line')->count())
                            <th>{{ trans('backpack::crud.actions') }}</th>
                        @endif
                    </tr>
                </tfoot>
            </table>

            @if ($crud->buttons()->where('stack', 'bottom')->count())
                <div id="bottom_buttons" class="d-print-none text-center text-sm-left">
                    @include('crud::inc.button_stack', ['stack' => 'bottom'])

                    <div id="datatable_button_stack" class="float-right text-right hidden-xs"></div>
                </div>
            @endif

        </div>

    </div>
    @if ($crud->entity_name_plural == 'Supplier Invoices')

        <div class="modal" tabindex="-1" role="dialog" id="modal-approve-partial">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Approve Partial</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form-approve-partial">
                            <div class="row mt-4">
                                <input type="hidden" name="master_item_id" id="master_item_id">
                                <div class="col-md-12">
                                    <label for="">Supplier Invoice Amount</label>
                                    <input type="number" class="form-control" name="total_amount" id="total_amount"
                                        readonly>
                                </div>
                                <div class="col-md-12">
                                    <label for="">Total Approved </label>
                                    <input type="number" class="form-control" name="submitted_amount" id="submitted_amount"
                                        readonly>
                                </div>
                                <div class="col-md-12">
                                    <label for="">Percentage</label>
                                    <input type="number" class="form-control" name="percentage" id="percentage">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Amount</label>
                                    <input type="number" class="form-control" name="approved_amount" id="approved_amount">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Remarks</label>
                                    <textarea name="remarks" class="form-control" id="remarks" cols="30" rows="3" placeholder="Type Something"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="btn-approve-form-save">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    @endif
@endsection

@section('after_styles')
    <!-- DATA TABLES -->
    <link rel="stylesheet" type="text/css"
        href="{{ asset('packages/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('packages/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('packages/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}">

    <link rel="stylesheet"
        href="{{ asset('packages/backpack/crud/css/crud.css') . '?v=' . config('backpack.base.cachebusting_string') }}">
    <link rel="stylesheet"
        href="{{ asset('packages/backpack/crud/css/form.css') . '?v=' . config('backpack.base.cachebusting_string') }}">
    <link rel="stylesheet"
        href="{{ asset('packages/backpack/crud/css/list.css') . '?v=' . config('backpack.base.cachebusting_string') }}">

    <!-- CRUD LIST CONTENT - crud_list_styles stack -->
    @stack('crud_list_styles')
@endsection

@section('after_scripts')
    @include('crud::inc.datatables_logic')
    <script src="{{ asset('packages/backpack/crud/js/crud.js') . '?v=' . config('backpack.base.cachebusting_string') }}">
    </script>
    <script src="{{ asset('packages/backpack/crud/js/form.js') . '?v=' . config('backpack.base.cachebusting_string') }}">
    </script>
    <script src="{{ asset('packages/backpack/crud/js/list.js') . '?v=' . config('backpack.base.cachebusting_string') }}">
    </script>

    <!-- CRUD LIST CONTENT - crud_list_scripts stack -->
    @stack('crud_list_scripts')
    @if ($crud->entity_name_plural == 'projects')
        <script>
            //Close Project
            $(document).on('click', '.close-project', function() {
                let route = $(this).data('route');
                $.ajax({
                    url: route,
                    type: 'POST',
                    beforeSend: function() {
                        return confirm(`Are you sure to Close the {{ $crud->entity_name }} ?`);
                    },
                    success: function(result) {
                        // Show an alert with the result
                        console.log(result, route);
                        new Noty({
                            text: "Log was deleted",
                            type: "success"
                        }).show();

                        // Hide the modal, if any
                        $('.modal').modal('hide');

                        crud.table.ajax.reload();
                    },
                    error: function(result) {
                        crud.table.ajax.reload();
                        // Show an alert with the result
                        new Noty({
                            text: "The new entry could not be created. Please try again.",
                            type: "warning"
                        }).show();
                    }
                });
            })
            //GENERATE PASSWORD
            $(document).on('click', '.generate-password', function(e) {

                let route = "{{ route('project.generatePassword', ':id') }}";
                route = route.replace(':id', $(this).data('id'));
                $.ajax({
                    url: route,
                    type: 'POST',
                    beforeSend: function() {
                        return confirm(`Are you sure to regenrate password ?`);
                    },
                    success: function(result) {
                        new Noty({
                            text: "Success generate new password",
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    },
                    error: function(result) {
                        crud.table.ajax.reload();
                        new Noty({
                            text: "Failed to generate password",
                            type: "warning"
                        }).show();
                        console.log(result);
                    }
                });
                e.stopPropagation();
            })
        </script>
    @endif

    @if (in_array($crud->entity_name_plural, ['quotations', 'agreements']))
        <script>
            $(document).on('click', '.print-prompt', function(e) {
                let url = $(this).data('url');
                swal({
                    title: "Print with signature?",
                    icon: "warning",
                    buttons: {
                        yes: {
                            text: 'Yes',
                            className: 'swal-button swal-button--confirm btn-success'
                        },
                        no: {
                            text: 'No',
                            visible: true,
                            className: 'swal-button swal-button--confirm swal-button--danger'
                        },
                        close: {
                            text: 'close',
                            visible: true,
                            className: 'swal-button swal-button--cancel'
                        }
                    },
                    dangerMode: true,
                }).then(function(submit) {
                    if (submit == 'yes') {
                        url = `${url}?signature=1`;
                        window.open(url, '_blank');
                    } else if (submit == 'no') {
                        window.open(url, '_blank');
                    }
                })
            });
        </script>
    @endif
    @if (in_array($crud->entity_name_plural, ['variation orders']))
        <script>
            $(document).on('click', '.print-prompt', function(e) {
                let url = $(this).data('url');
                let form = document.createElement("div");
                form.innerHTML = `
            <form id="form-vo-print">
            <div class="row justify-content-center">
                <div class="form-check mr-3">
                    <input class="form-check-input" type="checkbox" name="signature" value="1">
                    <label class="form-check-label" for="gridCheck">
                    Signature
                    </label>
                </div>
                <div class="form-check mr-3">
                    <input class="form-check-input" type="checkbox" name="price_quantity" value="1">
                    <label class="form-check-label" for="gridCheck">
                     Price & Quanitty
                    </label>
                </div>
                <div class="form-check mr-3">
                    <input class="form-check-input" type="checkbox" name="show_border" value="1">
                    <label class="form-check-label" for="gridCheck">
                     Border
                    </label>
                </div>
            </div>
            </form>
          `;

                swal({
                    title: 'Print Checklist',
                    content: form,
                    buttons: {
                        cancel: "Cancel",
                        catch: {
                            text: "Print",
                            value: 'print',
                        },
                    }
                }).then((submit) => {
                    if (submit == 'print') {
                        url = `${url}?${$('#form-vo-print').serialize()}`;
                        window.open(url, '_blank');
                    }
                });
            });
        </script>
    @endif

    @if ($crud->entity_name_plural == 'Supplier Invoices')
        <script>
            $(document).on('click', '.act-btn-supplier-invoices', function(e) {
                e.preventDefault();
                let url = $(this).data('route');
                let type = $(this).data('type');
                let id = $(this).data('id');
                let submittedAmount = $(this).data('submitted_amount');
                let totalAmount = $(this).data('amount');
                let remainingUnpaid = $(this).data('remaining-unpaid');
                let params = {};

                if (type == "approve-full") {
                    params.approved_amount = $(this).data('amount');
                    url += `?approved_amount=${remainingUnpaid}`;
                    let ajaxPost = getDataWithAjax(url, 'POST', []).done(function(res) {
                        new Noty({
                            text: res,
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    })

                    ajaxPost.fail(function(e) {
                        new Noty({
                            text: "failed to change status Supplier Invoice",
                            type: "danger"
                        }).show();
                    })
                } else if (type == "approve-partial") {

                    $(`#modal-approve-partial`).appendTo("body").modal('show');
                    $('#form-approve-partial').trigger("reset");
                    $('#submitted_amount').val(submittedAmount);
                    $('#total_amount').val(totalAmount);

                    $(document).on('click', '#btn-approve-form-save', function(e) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        let form = $('#form-approve-partial')[0];
                        let formData = new FormData(form);
                        let ajaxPost = getDataWithAjax(url, 'POST', formData).done(function(res) {
                            new Noty({
                                text: res,
                                type: "success"
                            }).show();
                            $(`#modal-approve-partial`).modal('hide');
                            crud.table.ajax.reload();
                        })
                        ajaxPost.fail(function(e) {
                            if (e.status == 400) {
                                new Noty({
                                    text: e.responseJSON,
                                    type: "danger"
                                }).show();
                            } else {
                                new Noty({
                                    text: "failed to approve Supplier Invoice",
                                    type: "danger"
                                }).show();
                            }


                        })
                    })

                } else if (type == "reject") {
                    window.location.replace(url);
                } else if (type == "mark-as-paid") {
                    swal({
                        title: 'Confirm Mark As Paid',
                        text: "Would you like to mark all approved logs as 'Paid'? This action will update the status of all approved logs to 'Paid'.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, mark as Paid',
                        cancelButtonText: 'No, do not mark',
                        buttons: {
                            cancel: {
                                text: "{!! trans('backpack::crud.cancel') !!}",
                                value: null,
                                visible: true,
                                className: "bg-secondary",
                                closeModal: true,
                            },
                            confirm: {
                                text: "{!! trans('backpack::crud.apply') !!}",
                                value: true,
                                visible: true,
                                className: "bg-danger",
                            }
                        },
                    }).then((value) => {
                        if (value) {
                            let ajaxPost = getDataWithAjax(url, 'POST', []).done(function(res) {
                                new Noty({
                                    text: res,
                                    type: "success"
                                }).show();

                                crud.table.ajax.reload();
                            })

                            ajaxPost.fail(function(e) {
                                new Noty({
                                    text: "failed to change status Supplier Invoice",
                                    type: "danger"
                                }).show();
                            })
                        }
                    });


                    console.log('mark as paid')
                } else {
                    let ajaxPost = getDataWithAjax(url, 'POST', $.param(params)).done(function(res) {
                        new Noty({
                            text: res,
                            type: "success"
                        }).show();

                        crud.table.ajax.reload();
                    })

                    ajaxPost.fail(function(e) {
                        new Noty({
                            text: "failed to change status Supplier Invoice",
                            type: "danger"
                        }).show();
                    })
                }




            });


            $('#percentage').keyup(function() {
                let total = Number($('#total_amount').val());
                let percentage = (Number($('#percentage').val()) / 100) * total;
                $('#approved_amount').val(percentage.toFixed(2));
            });

            $('#approved_amount').keyup(function() {
                let total = Number($('#total_amount').val());
                let amount = Number($('#approved_amount').val());
                let percentage = (amount / total) * 100;
                $('#percentage').val(percentage.toFixed(2));

            });

            function getDataWithAjax(url_, method_ = 'GET', data_ = []) {


                var ajax_ = $.ajax({
                    processData: false,
                    dataType: 'json',
                    contentType: false,
                    url: url_,
                    method: method_,
                    data: data_,
                });

                return ajax_;


            }

            function isEmpty(str) {
                return (!str || str.length === 0);
            }
        </script>
    @endif

    @if ($crud->entity_name == 'lead')
        {{--  FOR SOFT DELETE LEADS  --}}
        <script>
            $(document).on('click', '#act-void', function(e) {
                let deleteRoute = $(this).data('route');
                let checkAppointmentRoute = $(this).data('route_checkappointment');
                checkAppointments(checkAppointmentRoute, deleteRoute, 'delete')

            })

            $(document).on('click', '#act-restore', function(e) {
                let restoreRoute = $(this).data('route');
                let checkAppointmentRoute = $(this).data('route_checkappointment')
                checkAppointments(checkAppointmentRoute, restoreRoute, 'restore')
            });

            $(document).on('click', '#convert-to-quotation', function(e) {
                let convertToQuotationRoute = $(this).data('route');
                let checkProjectRoute = $(this).data('route_check_project');
                let convertToProjectRoute = $(this).data('route_convert_to_project');
                checkProject(checkProjectRoute, convertToQuotationRoute, convertToProjectRoute)
            });

            $(document).on('click', '#act-convert-to-project', function(e) {
                let convertToProjectRoute = $(this).data('route');
                convertToProject(convertToProjectRoute, null, null);
            });


            function deleteLead(route) {
                $.ajax({
                    type: 'POST',
                    url: route,
                    success: function(result) {
                        new Noty({
                            text: "Lead has been successfully removed",
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    },
                    error: function(res) {
                        new Noty({
                            text: res.responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            }

            function restoreLead(route) {
                $.ajax({
                    type: 'POST',
                    url: route,
                    success: function(result) {
                        new Noty({
                            text: "Lead has been successfully restore",
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    },
                    error: function(res) {
                        crud.table.ajax.reload();
                        new Noty({
                            text: typeof(res.responseJSON) === 'object' ? res.responseJSON.message : res
                                .responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            }

            function checkAppointments(route, routeAction, action) {
                $.ajax({
                    type: 'GET',
                    url: route,
                    success: function(res) {

                        if (action == "delete") {
                            deleteLead(routeAction)
                        } else {
                            restoreLead(routeAction);
                        }
                    },
                    error: function(res) {
                        if (res.status == 302) {
                            swal({
                                title: "Continue this action?",
                                text: `this lead has an appointments, If continued then the appointment will be ${action}`,
                                icon: "warning",
                                buttons: {
                                    yes: {
                                        text: 'Yes',
                                        className: 'swal-button swal-button--confirm btn-success'
                                    },
                                    close: {
                                        text: 'close',
                                        visible: true,
                                        className: 'swal-button swal-button--cancel'
                                    }
                                },
                                dangerMode: true,
                            }).then(function(submit) {
                                if (submit == 'yes') {
                                    if (action == "delete") {
                                        deleteLead(routeAction)
                                    } else {
                                        restoreLead(routeAction);
                                    }
                                }
                            })
                        }
                    }
                });
            }

            function checkProject(checkProjectRoute, convertToQuotationRoute, convertToProjectRoute) {
                $.ajax({
                    type: 'GET',
                    url: checkProjectRoute,
                    success: function(res) {
                        convertToQoutation(convertToQuotationRoute)
                    },
                    error: function(res) {
                        if (res.status == 424) {
                            swal({
                                title: "Continue this action?",
                                text: `This lead doesn't have a project, if this action is continued it will automatically create a project as well`,
                                icon: "warning",
                                buttons: {
                                    yes: {
                                        text: 'Yes',
                                        className: 'swal-button swal-button--confirm btn-success'
                                    },
                                    close: {
                                        text: 'close',
                                        visible: true,
                                        className: 'swal-button swal-button--cancel'
                                    }
                                },
                                dangerMode: true,
                            }).then(function(submit) {
                                if (submit == 'yes') {
                                    convertToProject(convertToProjectRoute, convertToQuotationRoute)
                                }
                            })
                        }
                    }
                });
            }

            function convertToProject(route, convertToQuotationRoute, action = 'convertQoutation') {
                $.ajax({
                    type: 'POST',
                    url: route,
                    success: function(result) {
                        new Noty({
                            text: "Lead has been successfully converted to project",
                            type: "success"
                        }).show();
                        if (action == "convertQoutation") {
                            convertToQoutation(convertToQuotationRoute)
                        }
                        crud.table.ajax.reload();
                    },
                    error: function(res) {
                        new Noty({
                            text: res.responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            }

            function convertToQoutation(route) {
                let routeRedirect = "{{ backpack_url('quotation/create?add_from_project_id=') }}";
                $.ajax({
                    type: 'POST',
                    url: route,
                    success: function(result) {
                        new Noty({
                            text: result.message,
                            type: result.type,
                        }).show();
                        if (result.project_id) {
                            setTimeout(
                                function() {
                                    location.href = routeRedirect + '' + result.project_id
                                }, 2000);
                        }
                    },
                    error: function(res) {
                        new Noty({
                            text: res.responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            }
        </script>
    @endif

    {{-- For Export Function on the Data List --}}
    <script>
        let exportDateFrom = null;
        let exportDateTo = null;
        let exportStatus = null;

        function checkUrlExport() {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const urlParamFromTo = urlParams.get('from_to');
            const urlParamStatus = urlParams.get('status');
            if (urlParamFromTo) {
                const exportFromTo = JSON.parse(urlParamFromTo);
                exportDateFrom = exportFromTo.from;
                exportDateTo = exportFromTo.to;
            }
            if (urlParamStatus) {
                exportStatus = urlParamStatus;
            }
        }

        if (typeof exportPDF != 'function') {

            $("[data-button-type=exportPDF]").unbind('click');

            function exportPDF(buttonExport) {
                var buttonExport = $(buttonExport);
                var routeExport = buttonExport.attr('data-route');
                let newUrlExport = null;

                if (exportDateFrom || exportDateTo || exportStatus) {
                    // var exportFrom = exportDateFrom;
                    // var exportTo = exportDateTo;

                    if (exportDateFrom && exportDateTo && exportStatus) {
                        // exportFrom = exportFrom.split(' ')[0];
                        // exportTo = exportTo.split(' ')[0];
                        newUrlExport = routeExport + '&from=' + exportDateFrom + '&to=' + exportDateTo + '&status=' +
                            exportStatus;

                    } else if (exportDateFrom && exportDateTo) {
                        // exportFrom = exportFrom.split(' ')[0];
                        // exportTo = exportTo.split(' ')[0];
                        newUrlExport = routeExport + '&from=' + exportDateFrom + '&to=' + exportDateTo;

                    } else if (exportStatus) {
                        newUrlExport = routeExport + '&status=' + exportStatus;

                    }
                } else {
                    newUrlExport = routeExport;
                }

                exportDateFrom = null;
                exportDateTo = null;
                exportStatus = null;
                window.location.replace(newUrlExport);
            }
        }
    </script>
@endsection