@extends('layouts.app')

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

@push('styles')
<style>
    .table th, .table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.25rem 0.3rem;
    }
</style>
@endpush

@section('content')
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item">Business Partners</li>
            <li class="breadcrumb-item active" aria-current="page">Address Management</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Address Management</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addressModal">
            <i class="fas fa-plus me-2"></i>Add New Address
        </button>
    </div>

    <!-- Main Content Card -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Address List</h5>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-primary btn-sm" id="refreshTable">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                    <button class="btn btn-outline-success btn-sm" id="exportTable">
                        <i class="fas fa-download me-1"></i>Export
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="addressesTable" class="table table-sm table-striped fs-10 w-100 mb-0">
                    <thead class="bg-200 text-900 sticky-top">
                        <tr class="text-nowrap">
                            <th class="text-900 sort pe-1 align-middle">ID</th>
                            <th class="text-900 sort pe-1 align-middle">Entity Type</th>
                            <th class="text-900 sort pe-1 align-middle">Entity Name</th>
                            <th class="text-900 sort pe-1 align-middle">Entity Code</th>
                            <th class="text-900 sort pe-1 align-middle">Address Type</th>
                            <th class="text-900 sort pe-1 align-middle">Address</th>
                            <th class="text-900 sort pe-1 align-middle">City</th>
                            <th class="text-900 sort pe-1 align-middle">State</th>
                            <th class="text-900 sort pe-1 align-middle">Pincode</th>
                            <th class="text-900 sort pe-1 align-middle">Country</th>
                            <th class="text-900 sort pe-1 align-middle">Default</th>
                            <th class="text-900 sort pe-1 align-middle">Status</th>
                            <th class="text-900 pe-1 align-middle">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Address Modal -->
    <div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="addressModalLabel">Add New Address</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addressForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="entity_type" class="form-label">Entity Type <span class="text-danger">*</span></label>
                                    <select class="form-select" id="entity_type" name="entity_type" required>
                                        <option value="">Select Type</option>
                                        <option value="Vendor">Vendor</option>
                                        <option value="Customer">Customer</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="entity_id" class="form-label">Entity <span class="text-danger">*</span></label>
                                    <select class="form-select" id="entity_id" name="entity_id" required disabled>
                                        <option value="">Select Entity First</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="address_type" class="form-label">Address Type <span class="text-danger">*</span></label>
                                    <select class="form-select" id="address_type" name="address_type" required>
                                        <option value="">Select Type</option>
                                        <option value="Billing">Billing Address</option>
                                        <option value="Shipping">Shipping Address</option>
                                        <option value="Registered">Registered Office</option>
                                        <option value="Branch">Branch Office</option>
                                        <option value="Warehouse">Warehouse</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="is_default" class="form-label">Default Address</label>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="is_default" name="is_default" value="1">
                                        <label class="form-check-label" for="is_default">
                                            Set as default address for this type
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="address_line_1" class="form-label">Address Line 1 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="address_line_1" name="address_line_1" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="address_line_2" class="form-label">Address Line 2</label>
                                    <input type="text" class="form-control" id="address_line_2" name="address_line_2">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="city" name="city" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="state" name="state" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="pincode" class="form-label">Pincode <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="pincode" name="pincode" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="country" class="form-label">Country <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="country" name="country" value="India" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select class="form-select" id="status" name="status">
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Address</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable
            var table = $('#addressesTable').DataTable({
                processing: true,
                serverSide: false,
                ajax: {
                    url: '{{ route("business-partners.address-management.get-addresses") }}',
                    type: 'GET'
                },
                columns: [
                    { data: 'id' },
                    {
                        data: 'entity_type',
                        render: function(data) {
                            return data === 'Vendor' ?
                                '<span class="badge bg-info">Vendor</span>' :
                                '<span class="badge bg-success">Customer</span>';
                        }
                    },
                    { data: 'entity_name' },
                    { data: 'entity_code' },
                    {
                        data: 'address_type',
                        render: function(data) {
                            const colors = {
                                'Billing': 'bg-primary',
                                'Shipping': 'bg-warning',
                                'Registered': 'bg-secondary',
                                'Branch': 'bg-info',
                                'Warehouse': 'bg-dark'
                            };
                            return `<span class="badge ${colors[data] || 'bg-secondary'}">${data}</span>`;
                        }
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            return `${row.address_line_1}${row.address_line_2 ? ', ' + row.address_line_2 : ''}`;
                        }
                    },
                    { data: 'city' },
                    { data: 'state' },
                    { data: 'pincode' },
                    { data: 'country' },
                    {
                        data: 'is_default',
                        render: function(data) {
                            return data ?
                                '<span class="badge bg-success"><i class="fas fa-check"></i></span>' :
                                '<span class="badge bg-light text-dark">-</span>';
                        }
                    },
                    {
                        data: 'status',
                        render: function(data) {
                            return data === 'Active' ?
                                '<span class="badge bg-success">Active</span>' :
                                '<span class="badge bg-danger">Inactive</span>';
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data, type, row) {
                            return `
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-primary edit-address" data-id="${row.id}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-info view-address" data-id="${row.id}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-address" data-id="${row.id}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            `;
                        }
                    }
                ],
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rtip',
                responsive: true,
                pageLength: 25,
                language: {
                    search: "Search addresses:",
                    lengthMenu: "Show _MENU_ addresses per page",
                    info: "Showing _START_ to _END_ of _TOTAL_ addresses",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    }
                }
            });

            // Entity type change handler
            $('#entity_type').change(function() {
                var entityType = $(this).val();
                var entitySelect = $('#entity_id');

                if (entityType) {
                    entitySelect.prop('disabled', false);
                    entitySelect.html('<option value="">Loading...</option>');

                    $.ajax({
                        url: '{{ route("business-partners.address-management.get-entities") }}',
                        type: 'GET',
                        data: { type: entityType.toLowerCase() },
                        success: function(entities) {
                            var options = '<option value="">Select ' + entityType + '</option>';
                            entities.forEach(function(entity) {
                                options += `<option value="${entity.code}">${entity.name} (${entity.code})</option>`;
                            });
                            entitySelect.html(options);
                        },
                        error: function() {
                            entitySelect.html('<option value="">Error loading entities</option>');
                        }
                    });
                } else {
                    entitySelect.prop('disabled', true);
                    entitySelect.html('<option value="">Select Entity First</option>');
                }
            });

            // Refresh table
            $('#refreshTable').click(function() {
                table.ajax.reload();
            });

            // Export functionality
            $('#exportTable').click(function() {
                window.open('{{ route("business-partners.address-management.export") }}', '_blank');
            });

            // Form submission
            $('#addressForm').on('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);
                var url = '{{ route("business-partners.address-management.store") }}';
                var method = 'POST';

                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if(response.success) {
                            $('#addressModal').modal('hide');
                            $('#addressForm')[0].reset();
                            $('#entity_id').prop('disabled', true).html('<option value="">Select Entity First</option>');
                            table.ajax.reload();

                            // Show success message
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr) {
                        // Handle validation errors
                        if(xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            var errorMessage = '';
                            for(var field in errors) {
                                errorMessage += errors[field][0] + '\n';
                            }

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: errorMessage
                            });
                        }
                    }
                });
            });

            // Edit address
            $(document).on('click', '.edit-address', function() {
                var id = $(this).data('id');
                // Implementation for edit functionality
                console.log('Edit address:', id);
            });

            // View address
            $(document).on('click', '.view-address', function() {
                var id = $(this).data('id');
                // Implementation for view functionality
                console.log('View address:', id);
            });

            // Delete address
            $(document).on('click', '.delete-address', function() {
                var id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route("business-partners.address-management.destroy", ":id") }}'.replace(':id', id),
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if(response.success) {
                                    table.ajax.reload();
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        text: response.message,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush