{{-- resources/views/admin/customers/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Customers Management')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .filterBlocks { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
    .filterBlocks li { margin-bottom: 0; }
    .btn-filter { background: #007bff; color: white; }
    .btn-filter:hover { background: #0056b3; }
    .active-filter { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
    .import-section { 
        background: #f8f9fa; 
        padding: 20px; 
        border-radius: 8px; 
        margin-bottom: 20px; 
        border: 2px dashed #dee2e6; 
    }
</style>
@endpush

@section('content')
<div class="loadPages01">
    <!-- Import Section -->
    <div class="actionsHeader filterHeader">

   
    <ul class="ml-auto">
         @can('customers.import')
        <li style="margin-right: 10px;">  <button  class="btn btn-add" onclick="location.href='{{asset('sheet/customer_import_sample.xls')}}'">
          <i class="las la-file-download"></i>  Download Template
          </button></li>
          
        <li>  <button data-toggle="modal" data-target="#importModal" class="btn btn-add">
          <i class="las la-file-excel"></i> Import
          </button></li>
  @endcan
      <li>
                <button onclick="resetFilter();" class="btn btn-block" id="collapseFilter" style="display:none;">
                    <i class="las la-eraser"></i> Clear Filter
                </button>
            </li>
            <li>
                <button  class="btn btn-block filter-control btn-secondary text-white ml-2" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
                    <i class="las la-filter"></i> Filter
                </button>
            </li>
        </ul>
        </ul>
    

    </div>
    <!-- Filters -->

    <!-- Active Filters Display -->
    <div id="collapseFilter" class="active-filter" style="display: none;"></div>

    <!-- DataTable -->
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="customersTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Customer ID</th>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Location</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Source</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Import Modal -->
@push('modals')
@can('customers.import')
<div class="modal fade" id="importModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Customers from Excel</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="importForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="excel_file">Excel File (.xlsx, .xls, .csv)</label>
                        <input type="file" class="form-control" name="excel_file" id="excel_file" accept=".xlsx,.xls,.csv" required>
                        <small class="form-text text-muted">
                            Please use the provided template. Required fields: Name, Type, Status, Source
                        </small>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6><i class="las la-info-circle"></i> Import Instructions:</h6>
                        <ul class="mb-0">
                            <li>First row should contain headers</li>
                            <li>Name,Email,Phone, Type and Status are required</li>
                            <li>Email must be unique</li>
                            <li>Type: individual or company</li>
                            <li>Status: active/inactive</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="importBtn">
                        <i class="las la-upload"></i> Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
@endcan
      @include('admin.customers.components.filter')

@endsection

@push('scripts')
<script src="{{asset('modules/common/common.js')}}"></script>
<script>
$(document).ready(function() {
    var table = $('#customersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('customers.list') }}",
            type: "GET",
            data: function(d) {
                d.filter_name = $('#filter_name').val();
                d.filter_email = $('#filter_email').val();
                d.filter_phone = $('#filter_phone').val();
                d.filter_customer_id = $('#filter_customer_id').val();
                d.filter_type = $('#filter_type').val();
                d.filter_status = $('#filter_status').val();
                d.filter_source = $('#filter_source').val();
                d.filter_city = $('#filter_city').val();
                d.filter_state = $('#filter_state').val();
                d.filter_date_from = $('#filter_date_from').val();
                d.filter_date_to = $('#filter_date_to').val();
            }
        },
        columns: [
            { data: 'customer_id', name: 'customer_id' },
            { data: 'name', name: 'name' },
            { data: 'contact', name: 'contact' },
            { data: 'location', name: 'location' },
            { data: 'type', name: 'type' },
            { data: 'status', name: 'status' },
            { data: 'source', name: 'source' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']],
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        language: {
            emptyTable: "No customers found",
            info: "Showing _START_ to _END_ of _TOTAL_ customers",
            infoEmpty: "Showing 0 to 0 of 0 customers",
            infoFiltered: "(filtered from _MAX_ total customers)"
        }
    });

    // Initialize Select2
    $('.select2').select2({
        width: '100%',
        placeholder: "Select Option"
    });

    // Filter function
    window.filter = function() {
        table.ajax.reload();
        updateActiveFilters();
        if ($('.active-filter').children().length > 0) {
            $('#collapseFilter').show();
        }
    }

    // Reset filter
    window.resetFilter = function() {
        $('#customer-filter').trigger('reset');
        $('.select2').val('').trigger('change');
        table.ajax.reload();
        $('.active-filter').empty();
        $('#collapseFilter').hide();
    }

    // Update active filters display
    function updateActiveFilters() {
        const activeFilterContainer = $('.active-filter');
        activeFilterContainer.empty();
        
        function addActiveFilter(label, value, fieldId) {
            if (value) {
                const badge = `
                    <span class="badge badge-primary mr-2 mb-2 active-filter-badge">
                        ${label}: ${value}
                        <i class="las la-times ml-1" onclick="removeFilter('${fieldId}')"></i>
                    </span>
                `;
                activeFilterContainer.append(badge);
            }
        }
        
        addActiveFilter('Name', $('#filter_name').val(), 'filter_name');
        addActiveFilter('Email', $('#filter_email').val(), 'filter_email');
        addActiveFilter('Phone', $('#filter_phone').val(), 'filter_phone');
        addActiveFilter('Customer ID', $('#filter_customer_id').val(), 'filter_customer_id');
        addActiveFilter('Type', $('#filter_type option:selected').text(), 'filter_type');
        addActiveFilter('Status', $('#filter_status option:selected').text(), 'filter_status');
        addActiveFilter('Source', $('#filter_source option:selected').text(), 'filter_source');
        addActiveFilter('City', $('#filter_city').val(), 'filter_city');
        addActiveFilter('State', $('#filter_state').val(), 'filter_state');
        
        // Date range
        const dateFrom = $('#filter_date_from').val();
        const dateTo = $('#filter_date_to').val();
        if (dateFrom || dateTo) {
            const dateRange = `${dateFrom || 'Any'} to ${dateTo || 'Any'}`;
            const badge = `
                <span class="badge badge-primary mr-2 mb-2 active-filter-badge">
                    Created: ${dateRange}
                    <i class="las la-times ml-1" onclick="removeDateFilter()"></i>
                </span>
            `;
            activeFilterContainer.append(badge);
        }
    }

    // Remove specific filter
    window.removeFilter = function(fieldId) {
        $('#' + fieldId).val('').trigger('change');
        filter();
    }

    // Remove date filter
    window.removeDateFilter = function() {
        $('#filter_date_from, #filter_date_to').val('');
        filter();
    }

    // Delete customer
    $(document).on('click', '.btn-delete-customer', function() {
        var customerId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this customer? This action cannot be undone.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('customers.delete') }}",
                    type: "DELETE",
                    data: {
                        id: customerId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            toastr.error('You do not have permission.');
                        } else if (xhr.status === 400) {
                            toastr.error(xhr.responseJSON?.message || 'Cannot delete customer.');
                        } else {
                            toastr.error('An error occurred while deleting customer.');
                        }
                    }
                });
            }
        });
    });

    // Verify email
    $(document).on('click', '.btn-verify-email', function() {
        var customerId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('customers.verify-email') }}",
            type: "POST",
            data: {
                id: customerId,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status) {
                    toastr.success(response.message);
                    table.ajax.reload();
                }
            },
            error: function(xhr) {
                toastr.error('Failed to verify email.');
            }
        });
    });

    // Import form submission
    $('#importForm').on('submit', function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        var importBtn = $('#importBtn');
        var originalText = importBtn.html();
        
        importBtn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Importing...');
        
        $.ajax({
            url: "{{ route('customers.import') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                importBtn.prop('disabled', false).html(originalText);
                $('#importModal').modal('hide');
                
                if (response.status) {
                    toastr.success(response.message);
                    table.ajax.reload();
                }
            },
            error: function(xhr) {
                importBtn.prop('disabled', false).html(originalText);
                
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        toastr.error(messages[0]);
                    });
                } else {
                    toastr.error(xhr.responseJSON?.message || 'Failed to import customers.');
                }
            }
        });
    });
});
</script>
@endpush