@extends('admin.layouts.app')

@section('title', 'Country')

@section('content')
<x-admin.page-header title="List Of Country" breadcrumb="Masters / Locations / Country">
    <x-slot:actions>
        <button type="button" class="btn nb-btn-primary" data-toggle="modal" data-target="#modals-default" id="add_button">
            <i class="fas fa-plus me-1"></i> Add More
        </button>
    </x-slot:actions>
</x-admin.page-header>

<div class="modal fade insert_frm" id="modals-default">
    <div class="modal-dialog">
        <form class="modal-content" id="validation-form" method="POST" action="{{ route('admin.masters.countries.store') }}" autocomplete="off">
            @csrf
            <input type="hidden" name="_method" id="form_method" value="POST">
            <input type="hidden" name="id" id="id" value="">

            <div class="modal-header">
                <h5 class="modal-title">Add <span class="font-weight-light">Country</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Country Name <span class="text-danger">*</span></label>
                        <input type="text" name="Name" class="form-control" id="Name" placeholder="Country Name" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-control" id="Status" name="Status" required>
                            <option value="1" selected>Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" id="submit" name="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

<div class="card nb-table-card">
    <div class="card-datatable">
        <table id="countries-table" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Country</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($countries as $index => $country)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $country->Name }}</td>
                        <td>
                            <x-admin.status-badge :active="(int) $country->Status === 1" />
                        </td>
                        <td>
                            <div class="nb-actions">
                                <a href="javascript:void(0);" class="nb-action-btn update" data-id="{{ $country->id }}" data-toggle="tooltip" title="Edit">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <form method="POST" action="{{ route('admin.masters.countries.destroy', $country) }}" class="d-inline delete-form" onsubmit="return confirm('Are you sure you want to delete this Country?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="nb-action-btn danger delete" title="Delete" data-toggle="tooltip">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#countries-table').DataTable();

    $('#add_button').on('click', function () {
        $('.modal-title').html("Add <span class='font-weight-light'>Country</span>");
        $('#validation-form').attr('action', @json(route('admin.masters.countries.store')));
        $('#form_method').val('POST');
        $('#id').val('');
        $('#Name').val('');
        $('#Status').val(1);
        $('#submit').text('Submit');
    });

    $(document).on('click', '.update', function (event) {
        event.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            url: @json(url('admin/masters/countries')) + '/' + id,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#Name').val(data.Name);
                $('#Status').val(data.Status);
                $('#id').val(id);
                $('#validation-form').attr('action', @json(url('admin/masters/countries')) + '/' + id);
                $('#form_method').val('PUT');
                $('#submit').text('Update');
                $('.modal-title').html("Update <span class='font-weight-light'>Country</span>");
                $('.insert_frm').modal('show');
            }
        });
    });
});
</script>
@endpush