@extends('admin.layouts.base')
@section('title', 'Warehouses')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Warehouse Management</h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('admin.warehouses.create') }}" class="btn btn-primary">
                    <i class="ki-duotone ki-plus fs-2"></i> Add Warehouse
                </a>
            </div>
        </div>

        <div class="card-body py-4">
            <!-- Filters -->
            <div class="row mb-5">
                <div class="col-md-3">
                    <input type="text" id="search" class="form-control form-control-solid"
                           placeholder="Search warehouses..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <select id="city_filter" class="form-select form-select-solid">
                        <option value="">All Cities</option>
                        @foreach($cities as $city)
                            <option value="{{ $city }}" {{ request('city') == $city ? 'selected' : '' }}>{{ $city }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="zone_filter" class="form-select form-select-solid">
                        <option value="">All Zones</option>
                        @foreach($zones as $zone)
                            <option value="{{ $zone }}" {{ request('zone') == $zone ? 'selected' : '' }}>{{ $zone }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="status_filter" class="form-select form-select-solid">
                        <option value="">All Status</option>
                        <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-3 text-end">
                    <button type="button" id="apply_filters" class="btn btn-light-primary">
                        Apply Filters
                    </button>
                    <button type="button" id="reset_filters" class="btn btn-light">Reset</button>
                </div>
            </div>

            <!-- DataTable -->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="warehouses_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="text-center">Code</th>
                        <th>Name</th>
                        <th>Location</th>
                        <th>Capacity</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let table;

    $(document).ready(function () {
        table = $('#warehouses_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("admin.warehouses.data") }}',
                data: function (d) {
                    // Send custom filters as top-level params
                    d.search   = $('#search').val();
                    d.city     = $('#city_filter').val();
                    d.zone     = $('#zone_filter').val();
                    d.is_active = $('#status_filter').val();
                }
            },
            columns: [
                { data: 'code', className: 'text-center' },
                { data: 'name' },
                { data: 'location' },
                { data: 'capacity' },
                { data: 'status', className: 'text-center', orderable: false },
                { data: 'actions', className: 'text-center', orderable: false, searchable: false }
            ],
            language: {
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
                emptyTable: 'No warehouses found',
                zeroRecords: 'No matching records found'
            },
            pageLength: 25,
            lengthMenu: [10, 25, 50, 100],
            order: [[1, 'asc']]
        });

        // Apply filters
        $('#apply_filters').on('click', function () {
            table.ajax.reload();
        });

        // Reset
        $('#reset_filters').on('click', function () {
            $('#search, #city_filter, #zone_filter, #status_filter').val('');
            table.ajax.reload();
        });

        // Enter key in search
        $('#search').on('keyup', function (e) {
            if (e.key === 'Enter') {
                table.ajax.reload();
            }
        });
    });

    // Status toggle (works after DataTables loads rows dynamically)
    $(document).on('change', '.toggle-warehouse-status', function () {
        const isChecked = $(this).is(':checked');
        const url = isChecked 
            ? $(this).data('activate-url') 
            : $(this).data('deactivate-url');

        const $checkbox = $(this);

        $.ajax({
            url: url,
            method: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            headers: { 'Accept': 'application/json' },
            success: function (res) {
                if (res.success) {
                    toastr.success(res.message);
                } else {
                    toastr.error(res.message || 'Failed');
                    $checkbox.prop('checked', !isChecked);
                }
            },
            error: function () {
                toastr.error('Request failed');
                $checkbox.prop('checked', !isChecked);
            }
        });
    });
</script>
@endpush