@extends('layouts.app')

@section('title', 'Countries - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/select2/select2.min.css') }}">
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Countries</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Settings</li>
                        <li class="breadcrumb-item active">Countries</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            @can('create countries')
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#countryModal" id="addCountryBtn"><i class="fa fa-plus"></i> Add Country</button>
                            @endcan
                            <button type="button" class="btn btn-secondary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <!-- DataTable -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Countries List</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="countriesTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Country Code</th>
                                        <th>Country Name</th>
                                        <th>Code</th>
                                        <th>Sorting</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Country Modal (Create/Edit/View) -->
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="countryModalTitle">Add Country</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="countryForm">
                @csrf
                <input type="hidden" id="country_id" name="country_id">
                <input type="hidden" id="_method" name="_method" value="POST">
                <div class="modal-body">
                    <div id="countryModalBody">
                        <div class="form-group">
                            <label for="modal_countrycode">Country Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_countrycode" name="countrycode" maxlength="10" required>
                            <small class="form-text text-muted">Unique 3-letter country code (e.g., USA, GBR)</small>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_countryname">Country Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_countryname" name="countryname" maxlength="200" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_code">Code</label>
                            <input type="text" class="form-control" id="modal_code" name="code" maxlength="10">
                            <small class="form-text text-muted">2-letter ISO code (e.g., US, GB)</small>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_sorting">Sorting</label>
                            <input type="number" class="form-control" id="modal_sorting" name="sorting" min="0" value="0">
                            <small class="form-text text-muted">Higher values appear first</small>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>

                    <!-- View Content -->
                    <div id="countryViewContent" style="display: none;">
                        <table class="table table-bordered">
                            <tr>
                                <th>Country Code</th>
                                <td id="view_countrycode">-</td>
                            </tr>
                            <tr>
                                <th>Country Name</th>
                                <td id="view_countryname">-</td>
                            </tr>
                            <tr>
                                <th>Code</th>
                                <td id="view_code">-</td>
                            </tr>
                            <tr>
                                <th>Sorting</th>
                                <td id="view_sorting">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="countryModalFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="countrySubmitBtn">
                        <i class="fa fa-spinner fa-spin" id="countrySubmitSpinner" style="display: none;"></i>
                        <span id="countrySubmitText">Save</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        // Show loader on initial page load
        showFullScreenLoader();
        
        // Initialize DataTable
        var table = $('#countriesTable').DataTable({
            processing: false,
            serverSide: false,
            ajax: {
                url: "{{ route('countries.ajax.list') }}",
                cache: false,
                timeout: 30000,
                dataSrc: 'data',
                complete: function() {
                    hideFullScreenLoader();
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Error:', error);
                    hideFullScreenLoader();
                }
            },
            columns: [
                { data: 'countrycode', name: 'countrycode' },
                { data: 'countryname', name: 'countryname' },
                { data: 'code', name: 'code', defaultContent: '-' },
                { data: 'sorting', name: 'sorting', defaultContent: 0 },
                { 
                    data: 'countrycode', 
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var actions = '<div class="btn-group" role="group">';
                        actions += '<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                        actions += '<i class="fa fa-cog"></i> Actions ';
                        actions += '</button>';
                        actions += '<div class="dropdown-menu dropdown-menu-right">';
                        actions += '<a class="dropdown-item view-country" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-eye"></i> View</a>';
                        @can('edit countries')
                        actions += '<a class="dropdown-item edit-country" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-edit"></i> Edit</a>';
                        @endcan
                        @can('delete countries')
                        actions += '<a class="dropdown-item delete-country" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-trash"></i> Delete</a>';
                        @endcan
                        actions += '</div>';
                        actions += '</div>';
                        return actions;
                    }
                }
            ],
            order: [[3, 'desc'], [1, 'asc']],
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            language: {
                processing: '',
                emptyTable: "No countries found",
                zeroRecords: "No matching countries found"
            }
        });

        // Refresh table manually
        $('#refreshTable').on('click', function() {
            var $btn = $(this);
            var originalHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            showFullScreenLoader();
            table.ajax.reload(function(json) {
                $btn.prop('disabled', false).html(originalHtml);
                hideFullScreenLoader();
            }, false);
        });

        // Add Country - Open modal
        $('#addCountryBtn').on('click', function() {
            resetCountryModal();
            $('#countryModalTitle').text('Add Country');
            $('#countryForm').attr('action', "{{ route('countries.store') }}");
            $('#_method').val('POST');
            $('#country_id').val('');
            $('#countryModalBody').show();
            $('#countryViewContent').hide();
            $('#countryModalFooter').show();
            $('#countrySubmitBtn').show();
            $('#countrySubmitText').text('Create Country');
            $('#countryModal').modal('show');
        });

        // View Country
        $(document).on('click', '.view-country', function() {
            var countryId = $(this).data('id');
            showFullScreenLoader();
            $('#countryModalBody').hide();
            $('#countryViewContent').show();
            $('#countryModalFooter').show();
            $('#countrySubmitBtn').hide();
            $('#countryModalTitle').text('Country Details');
            
            $.ajax({
                url: "{{ route('countries.show.ajax', ':id') }}".replace(':id', countryId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var country = response.data;
                        $('#view_countrycode').text(country.countrycode || '-');
                        $('#view_countryname').text(country.countryname || '-');
                        $('#view_code').text(country.code || '-');
                        $('#view_sorting').text(country.sorting || 0);
                        $('#countryModal').modal('show');
                    } else {
                        showErrorToast('Failed to load country details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading country:', error);
                    showErrorToast('Error loading country details.');
                }
            });
        });

        // Edit Country
        $(document).on('click', '.edit-country', function() {
            var countryId = $(this).data('id');
            showFullScreenLoader();
            resetCountryModal();
            $('#countryModalTitle').text('Edit Country');
            $('#countryForm').attr('action', "{{ route('countries.update', ':id') }}".replace(':id', countryId));
            $('#_method').val('PUT');
            $('#country_id').val(countryId);
            $('#countryModalBody').show();
            $('#countryViewContent').hide();
            $('#countryModalFooter').show();
            $('#countrySubmitBtn').show();
            $('#countrySubmitText').text('Update Country');
            
            $.ajax({
                url: "{{ route('countries.show.ajax', ':id') }}".replace(':id', countryId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var country = response.data;
                        $('#modal_countrycode').val(country.countrycode || '');
                        $('#modal_countryname').val(country.countryname || '');
                        $('#modal_code').val(country.code || '');
                        $('#modal_sorting').val(country.sorting || 0);
                        $('#countryModal').modal('show');
                    } else {
                        showErrorToast('Failed to load country details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading country:', error);
                    showErrorToast('Error loading country details.');
                }
            });
        });

        // Reset modal form
        function resetCountryModal() {
            $('#countryForm')[0].reset();
            $('#countryForm').find('.is-invalid').removeClass('is-invalid');
            $('#countryForm').find('.invalid-feedback').text('');
            $('#country_id').val('');
            $('#_method').val('POST');
        }

        // Submit Country Form (Create/Edit)
        $('#countryForm').on('submit', function(e) {
            e.preventDefault();
            
            var $form = $(this);
            var $submitBtn = $('#countrySubmitBtn');
            var $spinner = $('#countrySubmitSpinner');
            var $submitText = $('#countrySubmitText');
            var countryId = $('#country_id').val();
            var method = $('#_method').val();
            var url = $form.attr('action');
            
            $submitBtn.prop('disabled', true);
            $spinner.show();
            $submitText.text(method === 'PUT' ? 'Updating...' : 'Creating...');
            showFullScreenLoader();
            
            var formData = {
                countrycode: $('#modal_countrycode').val(),
                countryname: $('#modal_countryname').val(),
                code: $('#modal_code').val(),
                sorting: $('#modal_sorting').val() || 0,
            };
            
            $.ajax({
                url: url,
                method: method === 'PUT' ? 'PUT' : 'POST',
                data: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    hideFullScreenLoader();
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PUT' ? 'Update Country' : 'Create Country');
                    
                    if (response.success) {
                        $('#countryModal').modal('hide');
                        showSuccessToast(response.message || 'Country saved successfully.');
                        table.ajax.reload(null, false);
                    } else {
                        showErrorToast(response.message || 'Failed to save country.');
                    }
                },
                error: function(xhr) {
                    hideFullScreenLoader();
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PUT' ? 'Update Country' : 'Create Country');
                    
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors || {};
                        $.each(errors, function(field, messages) {
                            var $field = $('#modal_' + field);
                            $field.addClass('is-invalid');
                            $field.siblings('.invalid-feedback').text(messages[0]);
                        });
                        showErrorToast('Please fix the validation errors.');
                    } else {
                        var errorMsg = xhr.responseJSON?.message || 'Error saving country.';
                        showErrorToast(errorMsg);
                    }
                }
            });
        });

        // Delete Country
        $(document).on('click', '.delete-country', function() {
            var countryId = $(this).data('id');
            
            if (!confirm('Are you sure you want to delete this country? This action cannot be undone.')) {
                return;
            }
            
            showFullScreenLoader();
            
            $.ajax({
                url: "{{ route('countries.destroy', ':id') }}".replace(':id', countryId),
                method: 'DELETE',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success) {
                        showSuccessToast(response.message || 'Country deleted successfully.');
                        table.ajax.reload(null, false);
                    } else {
                        showErrorToast(response.message || 'Failed to delete country.');
                    }
                },
                error: function(xhr) {
                    hideFullScreenLoader();
                    var errorMsg = xhr.responseJSON?.message || 'Error deleting country.';
                    showErrorToast(errorMsg);
                }
            });
        });
    });
</script>
@endpush