@extends('layouts.app')
@section('title', 'Manage Regions')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Assigned States</h3>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>State</th>
                                <th>Country</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($assignments as $assignment)
                                <tr>
                                    <td>{{ optional($assignment->state)->name }}</td>
                                    <td>{{ optional(optional($assignment->state)->country)->name }}</td>
                                    <td>
                                        <form method="POST" action="{{ route('admin.regional-management.unassign', ['id' => $managerId, 'stateId' => $assignment->state_id]) }}" onsubmit="return confirmAlert(this, 'Unassign this state?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger">Unassign</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center">No states assigned</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Available States</h3>
                    <form method="POST" action="{{ route('admin.regional-management.assign', $managerId) }}" class="form-inline">
                        @csrf
                        <div class="input-group input-group-sm">
                            <select name="state_id" class="form-control mr-2" required>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}">{{ $state->name }} ({{ optional($state->country)->name }})</option>
                                @endforeach
                            </select>
                            <div class="input-group-append">
                                <button class="btn btn-success" type="submit">Assign</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>State</th>
                                <th>Country</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($states as $state)
                                <tr>
                                    <td>{{ $state->name }}</td>
                                    <td>{{ optional($state->country)->name }}</td>
                                    <td>
                                        <form method="POST" action="{{ route('admin.regional-management.assign', $managerId) }}">
                                            @csrf
                                            <input type="hidden" name="state_id" value="{{ $state->id }}">
                                            <button class="btn btn-sm btn-outline-primary">Assign</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center">No states available</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer clearfix">
                    {!! $states->appends(request()->query())->links() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection