@extends('Company.layout.master')
@section('title',"Working Country")
@section('page_name',"Working Country")

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Custom tweaks for a polished look */
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid #e3e6f0;
            padding-top: 15px;
            padding-bottom: 15px;
            font-weight: 700;
            color: #4e73df;
        }
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #ced4da;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }
    </style>
@endpush

@section('content')

    <div class="container mt-4">
        {{-- Alert Section --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{session('success')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{session('error')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            {{-- Column 1: Add Country Form --}}
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-plus-circle me-2"></i> Add New Country</span>
                    </div>
                    <div class="card-body">
                        <form action="{{route('consultant.working-country.store')}}" method="POST" autocomplete="off">
                            @csrf
                            <div class="mb-3">
                                <label for="country_select" class="form-label text-muted small text-uppercase fw-bold">Select Country</label>
                                <select class="form-control select2" id="country_select" name="country_id" style="width: 100%;">
                                    <option value="">Choose a country...</option>
                                    @foreach($data as $d)
                                        <option value="{{$d->id}}">{{strtoupper($d->country)}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Add to List
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Column 2: Data Table --}}
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-globe-americas me-2"></i> Active Working Countries
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped align-middle mb-0">
                                <thead class="table-light">
                                <tr>
                                    <th scope="col" class="ps-4" style="width: 10%;">#</th>
                                    <th scope="col" style="width: 60%;">Country Name</th>
                                    <th scope="col" class="text-center" style="width: 30%;">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                             @foreach($country as $c)
                                <tr>
                                    <td class="ps-4 fw-bold text-muted">{{$loop->iteration}}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="bg-light rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 35px; height: 35px;">
                                                <small> {{strtoupper(substr($c->country->country,0,2))}} </small>
                                            </div>
                                            <span class="fw-bold text-dark">{{$c->country->country}}</span>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <form action="{{route('consultant.working-country.destroy',$c->id)}}" method="POST" onsubmit="return confirm('Are you sure you want to remove this country?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill px-3">
                                                <i class="fas fa-trash-alt me-1"></i> Delete
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                             @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize Select2 on the country dropdown
            $('.select2').select2({
                placeholder: "Select country",
                allowClear: true,
                theme: "classic" // You can remove this or change to 'bootstrap-5' if you have that theme installed
            });
        });
    </script>
@endpush