@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <h5 class="mb-0">Countries</h5>
            </div>
            <div class="col-auto">
                <a href="{{ route('settings.countries.create') }}" class="btn btn-primary btn-sm">
                    Add Country
                </a>
            </div>
        </div>       
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped yajra-datatable w-100">
            <thead>
                <tr>
                    <th>#</th>
                    <th>ISO Code</th>
                    <th>Name</th>
                    <th>Phone Code</th>
                    <th>Currency</th>
                    <th>Status</th>
                    <th width="120">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {

    let table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('settings.countries.index') }}",
        order: [[1, 'asc']],
          dom:
        "<'row mb-3 align-items-center'<'col-md-6'l><'col-md-6 d-flex justify-content-end'f>>" +
        "<'table-responsive'tr>" +
        "<'row mt-3 align-items-center'<'col-md-6'i><'col-md-6 d-flex justify-content-end'p>>",

        language: {
        search: "",
        searchPlaceholder: "Search countries...",
        lengthMenu: "Show _MENU_ entries",
        info: "Showing _START_–_END_ of _TOTAL_ countries"
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'iso_code', name: 'iso_code' },
            { data: 'name', name: 'name' },
            { data: 'phone_code', name: 'phone_code' },
            { data: 'currency', name: 'currency', orderable: false },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    /* ================= DELETE ================= */

    $(document).on('click', '.btn-delete', function () {
        let id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: 'This record will be deleted!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('settings/countries') }}/" + id,
                    type: 'DELETE',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        Swal.fire('Deleted!', res.message, 'success');
                        table.ajax.reload();
                    },
                    error: function (xhr) {
                        let message = 'Failed to delete country.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            title: 'Cannot Delete Country',
                            text: message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        });
    });

});
</script>
@endsection
