@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="{{ $filters['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 }}" {{ ($filters['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 }}" {{ ($filters['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" {{ ($filters['is_active'] ?? '') === '1' ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ ($filters['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">
                        <i class="ki-duotone ki-filter fs-2"><span class="path1"></span><span class="path2"></span></i>
                        Apply Filters
                    </button>
                    <button type="button" id="reset_filters" class="btn btn-light">Reset</button>
                </div>
            </div>

            <table class="table align-middle table-row-dashed fs-6 gy-5">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th>Code</th>
                        <th>Name</th>
                        <th>Location</th>
                        <th>Capacity</th>
                        <th>Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-semibold">
                    @forelse($warehouses as $warehouse)
                        <tr>
                            <td><span class="badge badge-light-primary">{{ $warehouse->code }}</span></td>
                            <td>
                                <a href="{{ route('admin.warehouses.show', $warehouse->id) }}" class="text-gray-800 text-hover-primary fw-bold">
                                    {{ $warehouse->name }}
                                </a>
                            </td>
                            <td>
                                {{ $warehouse->city }}@if($warehouse->zone), {{ $warehouse->zone }}@endif
                            </td>
                            <td>
                                <span class="badge badge-light">{{ number_format($warehouse->total_sqft) }} sqft</span>
                            </td>
                            
                            <td>
                                <div class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input toggle-warehouse-status" type="checkbox" 
                                        data-activate-url="{{ route('admin.warehouses.activate', $warehouse->id) }}"
                                        data-deactivate-url="{{ route('admin.warehouses.deactivate', $warehouse->id) }}"
                                        {{ $warehouse->is_active ? 'checked' : '' }} />
                                </div>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('admin.warehouses.show', $warehouse->id) }}" class="btn btn-sm btn-light btn-active-light-primary">
                                    <i class="ki-duotone ki-eye fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                    View
                                </a>
                                <a href="{{ route('admin.warehouses.edit', $warehouse->id) }}" class="btn btn-sm btn-light btn-active-light-primary">
                                    <i class="ki-duotone ki-pencil fs-5"><span class="path1"></span><span class="path2"></span></i>
                                    Edit
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-10">
                                <div class="text-gray-600">No warehouses found</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="d-flex justify-content-end mt-5">
                {{ $warehouses->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#apply_filters').on('click', function() {
        const search = $('#search').val();
        const city = $('#city_filter').val();
        const zone = $('#zone_filter').val();
        const status = $('#status_filter').val();
        
        const url = new URL(window.location.href);
        url.searchParams.set('search', search);
        url.searchParams.set('city', city);
        url.searchParams.set('zone', zone);
        url.searchParams.set('is_active', status);
        
        window.location.href = url.toString();
    });
    
    $('#reset_filters').on('click', function() {
        window.location.href = '{{ route("admin.warehouses.index") }}';
    });
    
    // Allow Enter key to apply filters
    $('#search, #city_filter, #zone_filter, #status_filter').on('keypress', function(e) {
        if (e.which === 13) {
            $('#apply_filters').click();
        }
    });

    $('.toggle-warehouse-status').on('change', function() {
        const isChecked = $(this).is(':checked');
        const url = isChecked ? $(this).data('activate-url') : $(this).data('deactivate-url');
        const checkbox = $(this);
        
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            headers: {
                'Accept': 'application/json'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message || 'Failed to update status');
                    checkbox.prop('checked', !isChecked);
                }
            },
            error: function() {
                toastr.error('Failed to update status');
                checkbox.prop('checked', !isChecked);
            }
        });
    });
});
</script>
@endpush