@extends('backend.app')


@section('title', 'Create Customer')

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <style>
        /* General Table Styling */
        .dataTable {
            border-collapse: separate;
            border-spacing: 0 8px;
            width: 100%;
            font-size: 14px;
        }

        .dataTable thead th {
            background: #f8f9fc;
            font-weight: 600;
            color: #495057;
            padding: 12px;
            border-bottom: none !important;
        }

        .dataTable tbody tr {
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            border-radius: 6px;
        }

        .dataTable tbody td {
            padding: 12px;
            vertical-align: middle;
            border-top: none !important;
        }

        /* Avatar + Name column */
        .dataTable .customer-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .dataTable .customer-info img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e9ecef;
        }

        /* Status badge */
        .status-badge {
            padding: 4px 10px;
            font-size: 12px;
            border-radius: 12px;
            font-weight: 500;
        }

        .status-active {
            background: #d1e7dd;
            color: #0f5132;
        }

        .status-blocked {
            background: #f8d7da;
            color: #842029;
        }

        /* Action buttons */
        .table-actions a {
            margin: 0 5px;
            color: #495057;
            transition: all 0.2s;
        }

        .table-actions a:hover {
            color: #0d6efd;
        }

        /* Datatable pagination */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 6px 12px;
            margin: 2px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
            background: #fff;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #0d6efd;
            color: #fff !important;
            border-color: #0d6efd;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="mb-5">
                <h3 class="mb-0 ">Customers</h3>
            </div>
        </div>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-12">
            <!-- card -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row justify-content-between">
                        <div class="col-md-6 mb-3 ">
                            <a href="{{ route('customer.create') }}" class="btn btn-primary me-2">+ Add Customer</a>
                        </div>

                        <div class="col-lg-2 col-md-6  mt-3 mt-md-0">
                            <select class="form-select" name="status" id="status">
                                <option value="" selected>Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Blocked</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="data-table" class="table dt-responsive nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    {{-- <th class="">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="checkAll">
                                            <label class="form-check-label" for="checkAll">

                                            </label>
                                        </div>
                                    </th> --}}
                                    <th class="ps-1">Customer</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Location</th>
                                    <th>Create Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>

    <script>
        $('.dropify').dropify();
    </script>

    <script>
        $('#status').on('change', function() {
            $('#data-table').DataTable().ajax.reload();
        });
    </script>

    <script>
        $(function() {
            if (!$.fn.DataTable.isDataTable('#data-table')) {
                $('#data-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('customer.list') }}",
                        type: "GET",
                        data: function(d) {
                            d.status = $('#status').val();
                        }
                    },
                    columns: [
                        // {
                        //     data: 'checkbox',
                        //     name: 'checkbox',
                        //     orderable: false,
                        //     searchable: false
                        // },
                        {
                            data: 'customer',
                            name: 'customer',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'location',
                            name: 'location'
                        },
                        {
                            data: 'created_at',
                            name: 'created_at'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });
            }

            // Check/Uncheck all
            $('#checkAll').on('click', function() {
                $('.checkBoxClass').prop('checked', $(this).prop('checked'));
            });
        });
    </script>

    <script>
        // Bulk Delete
        function bulkDelete() {
            var ids = [];
            $(".checkBoxClass:checked").each(function() {
                ids.push($(this).val());
            });

            if (ids.length <= 0) {
                alert("Please select at least one customer.");
            } else {
                $.ajax({
                    url: "{{ route('customer.bulkDelete') }}",
                    type: "POST",
                    data: {
                        ids: ids,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        $('#data-table').DataTable().ajax.reload();
                        alert(data.success);
                    }
                });
            }
        }

        // Bulk Block
        function bulkBlock() {
            var ids = [];
            $(".checkBoxClass:checked").each(function() {
                ids.push($(this).val());
            });

            if (ids.length <= 0) {
                alert("Please select at least one customer.");
            } else {
                $.ajax({
                    url: "{{ route('customer.bulkBlock') }}",
                    type: "POST",
                    data: {
                        ids: ids,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        $('#data-table').DataTable().ajax.reload();
                        alert(data.success);
                    }
                });
            }
        }
    </script>

    <script>
        // Block / Unblock with password
        async function toggleBlock(id) {
            const {
                value: password
            } = await Swal.fire({
                title: "Enter your password",
                input: "password",
                inputLabel: "Password",
                inputPlaceholder: "Enter your password",
                inputAttributes: {
                    maxlength: 128,
                    autocapitalize: "off",
                    autocorrect: "off"
                },
                showCancelButton: true,
                preConfirm: (pw) => {
                    if (!pw) {
                        Swal.showValidationMessage("Password is required");
                    }
                    return pw;
                }
            });

            if (!password) return;

            Swal.fire({
                title: 'Verifying...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            $.ajax({
                url: "{{ route('customer.block', ':id') }}".replace(':id', id),
                type: "POST",
                data: {
                    password: password,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    Swal.close();
                    if (res.success) {
                        $('#customer-table').DataTable().ajax.reload(null, false);
                        Swal.fire('Success', res.message, 'success');
                        $('#data-table').DataTable().ajax.reload();
                    } else {
                        Swal.fire('Error', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    let message = xhr.responseJSON?.message || 'Something went wrong';
                    Swal.fire('Error', message, 'error');
                }
            });
        }

        // Delete with password
        async function deleteWithPassword(id) {
            const {
                value: password
            } = await Swal.fire({
                title: "Enter your password",
                input: "password",
                inputLabel: "Password",
                inputPlaceholder: "Enter your password",
                inputAttributes: {
                    maxlength: 128,
                    autocapitalize: "off",
                    autocorrect: "off"
                },
                showCancelButton: true,
                preConfirm: (pw) => {
                    if (!pw) {
                        Swal.showValidationMessage("Password is required");
                    }
                    return pw;
                }
            });

            if (!password) return;

            const confirmDelete = await Swal.fire({
                title: 'Are you sure?',
                text: "This will permanently delete the customer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete'
            });

            if (!confirmDelete.isConfirmed) return;

            Swal.fire({
                title: 'Deleting...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            $.ajax({
                url: "{{ route('customer.destroy', ':id') }}".replace(':id', id),
                type: "POST",
                data: {
                    password: password,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    Swal.close();
                    if (res.success) {
                        $('#customer-table').DataTable().ajax.reload(null, false);
                        Swal.fire('Deleted', res.message, 'success');
                        $('#data-table').DataTable().ajax.reload();
                    } else {
                        Swal.fire('Error', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    let message = xhr.responseJSON?.message || 'Something went wrong';
                    Swal.fire('Error', message, 'error');
                }
            });
        }
    </script>
@endpush