@extends('layouts.app') @section('title', 'Manage Sub-Locations')
@section('header_title', 'Sub-Location Management')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
        <h3 class="text-lg font-bold mb-4">Add Sub-Location</h3>
        <form action="{{ route('sub-locations.store') }}" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1">Select Location</label>
                <select name="location_id" class="w-full border-gray-300 rounded-md p-2" required>
                    @foreach($locations as $location)
                        <option value="{{ $location->id }}">{{ $location->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1">Sub-Location Name</label>
                <input type="text" name="name" class="w-full border-gray-300 rounded-md p-2" placeholder="e.g., HR Department" required>
            </div>
            <div class="mb-4 flex items-center">
                <input type="checkbox" name="is_active" checked class="mr-2">
                <label>Is Active</label>
            </div>
            <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">Save</button>
        </form>
    </div>

    <div class="md:col-span-2 bg-white p-6 rounded-lg shadow-sm border border-gray-200">
        <table class="w-full text-left">
            <thead>
                <tr class="border-b">
                    <th class="pb-3">Name</th>
                    <th class="pb-3">Parent Location</th>
                    <th class="pb-3">Status</th>
                    <th class="pb-3 text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($subLocations as $sub)
                <tr class="border-b">
                    <td class="py-3">{{ $sub->name }}</td>
                    <td class="py-3">{{ $sub->location->name }}</td>
                    <td class="py-3">
                        <span class="px-2 py-1 text-xs rounded {{ $sub->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $sub->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="py-3 text-right flex justify-end gap-2">
                        <a href="{{ route('sub-locations.edit', $sub->id) }}" class="text-blue-600 hover:text-blue-900">Edit</a>
                        
                        <form action="{{ route('sub-locations.destroy', $sub->id) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-900">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection