@extends("admin.layouts.master")

@section("title","Manage Countries")

@section("content")
<div class="row">
    <div class="col-lg-12">

        <!-- Countries Table -->
        <div class="card mt-3">
            <div class="card-header  justify-content-between ">
                <h3 class="mb-0 float-left">All Countries</h3>
                <!-- Plus Icon Button -->
                <button class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#countryModal"
                        onclick="openCreateModal()">
                    <i class="fa fa-plus"></i> Add Country
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Name</th>
                                <th>Zone</th>
                                <th>Population</th>
                                <th>Code</th>
                                <th>Phone Code</th>
                                <th>Domain Code</th>
                                <th>Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($countries as $country)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $country->name }}</td>
                                    <td>{{ $country->zone }}</td>
                                    <td>{{ $country->population }}</td>
                                    <td>{{ $country->code }}</td>
                                    <td>{{ $country->phone_code }}</td>
                                    <td>{{ $country->domain_code }}</td>
                                    <td>
                                        <!-- Edit Button with data attributes -->
                                        <button
                                            class="btn btn-success btn-sm edit-btn"
                                            data-id="{{ $country->id }}"
                                            data-name="{{ $country->name }}"
                                            data-zone="{{ $country->zone }}"
                                            data-population="{{ $country->population }}"
                                            data-code="{{ $country->code }}"
                                            data-phone_code="{{ $country->phone_code }}"
                                            data-domain_code="{{ $country->domain_code }}"
                                            data-toggle="modal"
                                            data-target="#countryModal">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-danger">
                                        No Countries Found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                </div>
            </div>
        </div>

    </div>
</div>


{{-- ========================= --}}
{{--      COUNTRY MODAL        --}}
{{-- ========================= --}}
<div class="modal fade" id="countryModal" tabindex="-1">
    <div class="modal-dialog modal-lg"> {{-- Large modal --}}
        <form id="countryForm" method="POST">

            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Country</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="row">

                        <div class="col-md-6 form-group">
                            <label>Name</label>
                            <input name="name" id="name" class="form-control" placeholder="Ex. Bangladesh">
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Zone</label>
                            <input name="zone" id="zone" class="form-control" placeholder="Ex. UTC+6">
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Population</label>
                            <input name="population" id="population" class="form-control" placeholder="Ex. 99999">
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Code</label>
                            <input name="code" id="code" class="form-control" placeholder="Ex. 001">
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Phone Code</label>
                            <input name="phone_code" id="phone_code" class="form-control" placeholder="Ex. +880">
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Domain Code</label>
                            <input name="domain_code" id="domain_code" class="form-control" placeholder="Ex. .bd">
                        </div>

                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success" type="submit">Save</button>
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                </div>
            </div>

        </form>
    </div>
</div>

@endsection

@section('js')
<script>
function openCreateModal() {
    $("#modalTitle").text("Add Country");
    $("#countryForm").attr("action", "{{ route('country.store') }}");
    $("#formMethod").val("POST");

    $("#name").val("");
    $("#zone").val("");
    $("#population").val("");
    $("#code").val("");
    $("#phone_code").val("");
    $("#domain_code").val("");
}

// Edit modal using data attributes
$(document).on('click', '.edit-btn', function() {
    var id = $(this).data('id');
    $("#modalTitle").text("Edit Country");
    $("#countryForm").attr("action", "/country/" + id);
    $("#formMethod").val("PUT");
    $("#name").val($(this).data('name'));
    $("#zone").val($(this).data('zone'));
    $("#population").val($(this).data('population'));
    $("#code").val($(this).data('code'));
    $("#phone_code").val($(this).data('phone_code'));
    $("#domain_code").val($(this).data('domain_code'));

    $("#countryModal").modal("show");
});
</script>
@endsection