@extends('layouts.master')
@section('title', 'Customers')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
    <script src="{{ asset('assets/js/plugins/jquery-1.9.1.min.js') }}"></script>
@endpush
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-3">
                                <h6 class="mb-0">Customers Table</h6>
                            </div>
                            <div class="col-md-9 d-flex flex-wrap justify-content-end align-items-center">
                                <button class="btn btn-warning download-customers-csv" disabled><i class="fa-solid fa-file-csv me-2"></i>Export</button>
                                <a class="btn btn-success customer-import ms-2" href="#" data-bs-toggle="modal" data-bs-target="#customerImportModal"><i class="fa-solid fa-file-export me-2"></i>Import</a>
                                <a class="btn btn-primary mx-2" href="{{ route('customers.create') }}"><i class="fa-solid fa-plus me-2"></i>Add New Customer</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <div class="table-responsive p-0">
                            <table id="datatable" class="table customers-datatable mb-0" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"><input type="checkbox" class="check_all_checkbox ms-3"></th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Company</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Email</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Address</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">City / Postcode</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Country</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Invoices</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('customers.customer-url')
    @include('customers.email')
    @include('customers.import')
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            var x = {{$customerIds}};
            var download_customers = [];

            $(document).on('change', '.customer-chkbox', function(e) {
                var $this = $(this),
                value = $this.val();
                if ($this.prop('checked')) {
                    download_customers.push(value);
                } else {
                    download_customers.splice(download_customers.indexOf(value), 1);
                }
                $(".download-customers-csv").prop('disabled', download_customers.length == 0);
                $(".check_all_checkbox").prop('checked', download_customers.length === x.length);
            });

            $(document).on('change', '.check_all_checkbox', function() {
                if ($(this).prop('checked')) {
                    $('.customer-chkbox').prop('checked', true);
                    download_customers = JSON.parse(JSON.stringify(x));
                    $(".download-customers-csv").prop('disabled', false);
                } else {
                    download_customers = [];
                    $('.customer-chkbox').prop('checked', false);
                    $(".download-customers-csv").prop('disabled', true);
                }
            });

            $(".download-customers-csv").click(function(e) {
                $.ajax({
                    url: "{{ route('customers.download.zip') }}",
                    type: "GET",
                    contentType: 'application/zip',
                    dataType: 'text',
                    data: {
                        id: download_customers.join(",")
                    },
                    success: function success(response) {
                        var a = document.createElement('a');
                        var res = JSON.parse(response);
                        var url = res.url;
                        a.href = url;
                        a.download = "customers_" + res.date + ".zip";
                        document.body.append(a);
                        a.click();
                        a.remove();
                        toastr.success("Download customers successfully.");
                    },
                    error: function error() {
                        toastr.error("Something went wrong.");
                    },
                });
            });

            var table = $('.customers-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('customers.index') }}",
                    data: function (d) {
                        @role([\App\Models\User::SUPER_ADMIN])
                        d.company_group = $(document).find('#filter_company_groups').length ? $(document).find('#filter_company_groups').val() : '';
                        @endrole
                    }
                },
                "lengthChange": false,
                info : false,
                "language": {
                    "paginate": {
                        "previous": "Prev"
                    }
                },
                columnDefs: [{
                    'targets': 0,
                    'width' : '3%',
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function(data, type, full, meta) {
                        return '<input type="checkbox" class="customer-chkbox" name="id[]" value="' +
                            $('<div/>').text(data).html() + '">';
                    }
                   },
                ],
                drawCallback: function(settings) {
                    $(".customer-chkbox").each(function(x, y) {
                    if (download_customers.indexOf(parseInt($(y).val())) >= 0 || download_customers.indexOf($(y).val()) >= 0) {
                            $(y).prop("checked", true);
                        }
                    });
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'name'},
                    {data: 'company_name', name: 'company_name'},
                    {data: 'email', name: 'email'},
                    {data: 'address', name: 'address'},
                    {data: 'city_postcode', name: 'city_postcode'},
                    {data: 'country', name: 'country.name'},
                    {data: 'invoice', name: 'invoice'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                @role([\App\Models\User::SUPER_ADMIN])
                dom:
                    '<"row"' +
                    '<"col-sm-12 col-md-8" <"row" <"get_company_groups_data col-md-4 col-sm-6 col-auto" B> >>' +
                    '<"col-sm-12 col-md-4" <"search-filter me-2"f>>' +
                    '>t' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                initComplete: function () {
                        @php $companyGroupSelect = "<select id='filter_company_groups' class='form-select select2 text-capitalize mb-md-0 mb-2'><option value=''>" . 'All Company Groups' . "</option>"; @endphp
                        @foreach ($companyGroups as $companyGroup)
                        @php $companyGroupSelect .= "<option value='$companyGroup->id'>" . $companyGroup->name . "</option>"; @endphp 
                        @endforeach    
                        @php $companyGroupSelect .= "</select>"; @endphp
                        $("{!! $companyGroupSelect !!}").appendTo('.get_company_groups_data').on('change', function () {
                            $('.customers-datatable').DataTable().draw(true);
                        });
                        $('.select2').select2();
                    }
                @endrole
            });
            @if(session('import_failures'))
                $("#customerImportModal").modal('show');
            @endif
        });
        function Copy()
        {
            var copyText = document.getElementById("customerDetail");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }
        $(document.body).on('click', '.customer-email', function() {
            let customer = $(this).data('customer');
            $("#emailModal form").attr('action', $(this).data('route'));
            $("#emailModal input[name='id']").val(customer.id);
            $("#emailModal input[name='email']").val(customer.email);
        });
        $(document.body).on('click', '.customer-edit-url', function() {
            let customer = $(this).data('customer');
            let url_link = $(this).data('url');
            $("#customerUrlModal input[name='id']").val(customer.id);
            $("#customerUrlModal input[name='url']").val(url_link);
        });
    </script>
@endpush