@extends('layouts.app')
@section('title', 'Machine Area Allocations')

@section('content')
<style>
    .settings-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .settings-card .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 18px 28px;
        border-radius: 10px 10px 0 0;
    }
    .settings-card .card-body {
        padding: 28px;
    }
    
    .btn-action {
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 13px;
        margin: 0 3px;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
    }
    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .btn-action svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-edit { background: #ffc107; color: #212529; }
    .btn-edit:hover { background: #e0a800; color: #212529; }
    .btn-delete { background: #dc3545; color: #fff; }
    .btn-delete:hover { background: #c82333; color: #fff; }
    .btn-toggle { background: #17a2b8; color: #fff; }
    .btn-toggle:hover { background: #138496; color: #fff; }
    .btn-toggle-off { background: #6c757d; color: #fff; }
    .btn-toggle-off:hover { background: #5a6268; color: #fff; }
    
    .badge-status {
        padding: 4px 14px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 20px;
    }
    .badge-active { background: #d4edda; color: #155724; }
    .badge-inactive { background: #f8d7da; color: #721c24; }
    
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        background: #f8f9fa;
        padding: 15px 20px;
        border-radius: 10px;
    }
    .filter-group {
        flex: 1;
        min-width: 180px;
    }
    .filter-group select,
    .filter-group input {
        width: 100%;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #ced4da;
        padding: 0 14px;
        font-size: 14px;
        background: #ffffff;
    }
    .filter-group select:focus,
    .filter-group input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .filter-actions {
        display: flex;
        gap: 10px;
    }
    
    .btn-filter {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 10px 20px;
        border: none;
        font-size: 14px;
        transition: all 0.2s ease;
        height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }
    .btn-filter:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-clear {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 10px 20px;
        border: none;
        font-size: 14px;
        transition: all 0.2s ease;
        height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }
    .btn-clear:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
    }
    
    .schedule-table {
        background: #ffffff !important;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .schedule-table thead th {
        background: #f8f9fa !important;
        color: #495057;
        font-weight: 600;
        font-size: 14px;
        padding: 14px 18px;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }
    .schedule-table tbody td {
        padding: 12px 18px;
        font-size: 14px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
        background: #ffffff;
    }
    .schedule-table tbody tr:hover td {
        background-color: #f5f7fa !important;
    }
    .schedule-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .btn-primary-custom {
        background: #28a745;
        color: #fff;
        border-radius: 8px;
        padding: 10px 24px;
        border: none;
        transition: all 0.2s ease;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }
    .btn-primary-custom:hover {
        background: #218838;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }
    .btn-primary-custom svg {
        width: 20px;
        height: 20px;
    }
    
    .pagination-custom {
        margin: 0;
    }
    .pagination-custom .page-link {
        border-radius: 6px;
        padding: 8px 16px;
        margin: 0 3px;
        color: #495057;
        border: 1px solid #dee2e6;
        font-size: 14px;
        background: #ffffff;
    }
    .pagination-custom .page-item.active .page-link {
        background: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    .pagination-custom .page-link:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 10px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
            <path d="M9 9h6v6h-6z" />
            <path d="M9 15v-6" />
            <path d="M15 9v6" />
        </svg>
        Machine Area Allocations
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <div class="settings-card">
        <div class="card-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center">
                <h5 class="mb-0" style="font-weight: 600; font-size: 18px; color: #212529;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 8px; color: #28a745;">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
                        <path d="M9 9h6v6h-6z" />
                        <path d="M9 15v-6" />
                        <path d="M15 9v6" />
                    </svg>
                    Allocations Management
                </h5>
                <a href="{{ route('manufacturing.manuset.allocations.create') }}" class="btn btn-primary-custom">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 5l0 14" />
                        <path d="M5 12l14 0" />
                    </svg>
                    Add Allocation
                </a>
            </div>
        </div>
        <div class="card-body">
            <!-- Filters -->
            <div class="filter-row">
                <div class="filter-group">
                    <input type="text" id="searchInput" class="form-control" placeholder="Search allocations..." value="{{ request('search') }}">
                </div>
                <div class="filter-group">
                    <select id="locationFilter" class="form-control">
                        <option value="">All Locations</option>
                        @foreach($locations ?? [] as $location)
                            <option value="{{ $location->id }}" {{ request('location_id') == $location->id ? 'selected' : '' }}>
                                {{ $location->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="filter-group">
                    <select id="statusFilter" class="form-control">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="filter-actions">
                    <button class="btn btn-filter" id="applyFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.414 -4.414a2 2 0 0 1 -.586 -1.414z" />
                        </svg>
                        Filter
                    </button>
                    <button class="btn btn-clear" id="clearFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M18 6l-12 12" />
                            <path d="M6 6l12 12" />
                        </svg>
                        Clear
                    </button>
                </div>
            </div>
            
            <!-- Table -->
            <div class="table-responsive">
                <table class="schedule-table table">
                    <thead>
                        <tr>
                            <th>Area Code</th>
                            <th>Area Name</th>
                            <th>Machine</th>
                            <th>Location</th>
                            <th>Allocation Date</th>
                            <th>Status</th>
                            <th width="250">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($allocations as $allocation)
                        <tr>
                            <td><strong>{{ $allocation->area_code }}</strong></td>
                            <td>{{ $allocation->area_name }}</td>
                            <td>{{ $allocation->machine->name ?? '' }}</td>
                            <td>{{ $allocation->manufacturingLocation->name ?? '' }}</td>
                            <td>{{ $allocation->allocation_date->format('d M Y') }}</td>
                            <td>
                                <span class="badge-status {{ $allocation->is_active ? 'badge-active' : 'badge-inactive' }}">
                                    {{ $allocation->status_label }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{{ route('manufacturing.manuset.allocations.edit', $allocation->id) }}" class="btn-action btn-edit" title="Edit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                                            <path d="M13.5 6.5l4 4" />
                                        </svg>
                                    </a>
                                    <form action="{{ route('manufacturing.manuset.allocations.toggle', $allocation->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        <button type="submit" class="btn-action {{ $allocation->is_active ? 'btn-toggle' : 'btn-toggle-off' }}" title="{{ $allocation->is_active ? 'Deactivate' : 'Activate' }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z" />
                                                <path d="M12 7v5l3 3" />
                                            </svg>
                                        </button>
                                    </form>
                                    <button class="btn-action btn-delete deleteBtn" data-id="{{ $allocation->id }}" data-name="{{ $allocation->area_name }}" title="Delete">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 7l16 0" />
                                            <path d="M10 11l0 6" />
                                            <path d="M14 11l0 6" />
                                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <p class="text-muted">No machine allocations found</p>
                                <a href="{{ route('manufacturing.manuset.allocations.create') }}" class="btn btn-primary-custom btn-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 5l0 14" />
                                        <path d="M5 12l14 0" />
                                    </svg>
                                    Add Allocation
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 pt-2" style="border-top: 1px solid #e9ecef;">
                <div style="font-size: 14px; color: #6c757d;">
                    Showing {{ $allocations->firstItem() ?? 0 }} to {{ $allocations->lastItem() ?? 0 }} of {{ $allocations->total() }} entries
                </div>
                <div class="pagination-custom">
                    {{ $allocations->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: #dc3545; color: #fff; border-radius: 12px 12px 0 0; padding: 18px 24px;">
                <h5 class="modal-title" style="font-weight: 600;">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <p>Are you sure you want to delete <strong id="deleteName" style="color: #dc3545;"></strong>?</p>
                <p class="text-danger"><small>This action cannot be undone.</small></p>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #e9ecef; padding: 18px 24px;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.deleteBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('deleteName').textContent = name;
            document.getElementById('deleteForm').action = '{{ route("manufacturing.manuset.allocations.delete", "") }}/' + id;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        });
    });
    
    document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
        const search = document.getElementById('searchInput').value;
        const location = document.getElementById('locationFilter').value;
        const status = document.getElementById('statusFilter').value;
        
        let url = window.location.pathname + '?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (location) url += 'location_id=' + encodeURIComponent(location) + '&';
        if (status) url += 'status=' + encodeURIComponent(status) + '&';
        
        window.location.href = url;
    });
    
    document.getElementById('clearFiltersBtn')?.addEventListener('click', function() {
        window.location.href = window.location.pathname;
    });
    
    document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('applyFiltersBtn').click();
        }
    });
});
</script>
@endsection