@extends('layouts.masterbeta')

@section('title', 'Click ERP - Short Codes')

@push('styles')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .shortcode-text { font-family: monospace; font-size: 1.1rem; letter-spacing: 1px; color: #111425; }
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            display: flex;
            align-items: center;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
@endpush

@section('breadcrumbs')
    <a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <a href="#" class="text-secondary text-decoration-none me-2" style="font-size: 0.95rem;">Operations</a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <span class="fw-bold" style="font-size: 0.95rem;">Short Codes</span>
@endsection

@section('content')
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Short Codes Management</h4>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage SMS, USSD, and Voice short codes, toll-free lines, and validity periods.</p>
        </div>
        <button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenShortCodeModal">
            <i class="bi bi-plus-lg me-2"></i> Add Short Code
        </button>
    </div>

    <!-- KPIs -->
    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-start border-4 border-0" style="border-left-color: #5c4df0 !important;">
                <div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">TOTAL CODES</div>
                <h3 class="fw-bold mb-0">{{ $totalCount }}</h3>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-start border-4 border-0" style="border-left-color: #10b981 !important;">
                <div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">SMS CODES</div>
                <h3 class="fw-bold mb-0">{{ $smsCount }}</h3>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-start border-4 border-0" style="border-left-color: #f59e0b !important;">
                <div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">USSD CODES</div>
                <h3 class="fw-bold mb-0">{{ $ussdCount }}</h3>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-start border-4 border-0" style="border-left-color: #3b82f6 !important;">
                <div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">VOICE CODES</div>
                <h3 class="fw-bold mb-0">{{ $voiceCount }}</h3>
            </div>
        </div>
    </div>

    <!-- Data Table & Filter Card -->
    <div class="content-card">
        <div class="p-3 border-bottom bg-light bg-opacity-50">
            <form action="{{ route('shortcodes.index') }}" method="GET">
                <div class="row g-3">
                    <div class="col-md-7">
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control bg-white border-start-0 ps-0" placeholder="Search by shortcode, name, country, or network...">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select name="status" class="form-select bg-white" onchange="this.form.submit()">
                            <option value="">Status: All</option>
                            <option value="Active" {{ request('status') == 'Active' ? 'selected' : '' }}>Active</option>
                            <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                            <option value="Expired" {{ request('status') == 'Expired' ? 'selected' : '' }}>Expired</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="btn text-white w-100" style="background-color: #5c4df0;">
                            <i class="bi bi-funnel"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table table-custom table-hover mb-0 align-middle">
                <thead>
                    <tr>
                        <th>Short Code</th>
                        <th>Name / Description</th>
                        <th>Type & Toll-Free</th>
                        <th>Pricing / Fees</th>
                        <th>Region / Network</th>
                        <th>Status & Dates</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($shortcodes as $code)
                        <tr>
                            <td>
                                <div class="shortcode-text fw-bold">{{ $code->shortcode }}</div>
                            </td>
                            <td>
                                <div class="fw-medium text-dark">{{ $code->name ?? 'N/A' }}</div>
                                <div class="text-secondary small">Client ID: {{ $code->client_id ?? 'None' }}</div>
                            </td>
                            <td>
                                <span class="badge bg-secondary bg-opacity-10 text-dark border text-uppercase">{{ $code->code_type ?? 'N/A' }}</span>
                                @if($code->toll_free == 'YES')
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success-subtle ms-1">Toll-Free</span>
                                @endif
                            </td>
                            <td>
                                <div class="fw-bold text-dark">${{ number_format($code->monthly_fee, 2) }}</div>
                                <div class="text-secondary" style="font-size: 0.75rem;">Monthly Fee</div>
                            </td>
                            <td>
                                <div class="fw-medium">{{ $code->country ?? 'N/A' }}</div>
                                <div class="text-secondary small">{{ $code->network ?? 'All Networks' }}</div>
                            </td>
                            <td>
                                <span class="badge {{ $code->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-success px-2 py-1">
                                    {{ $code->status ?? 'Active' }}
                                </span>
                                <div class="text-secondary mt-1" style="font-size: 0.7rem;">Exp: {{ $code->expiry_date ? date('M d, Y', strtotime($code->expiry_date)) : 'N/A' }}</div>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-light text-primary me-1 btn-edit-shortcode" 
                                    data-id="{{ $code->id }}"
                                    data-client_id="{{ $code->client_id }}"
                                    data-name="{{ $code->name }}"
                                    data-shortcode="{{ $code->shortcode }}"
                                    data-code_type="{{ $code->code_type }}"
                                    data-toll_free="{{ $code->toll_free }}"
                                    data-monthly_fee="{{ $code->monthly_fee }}"
                                    data-country="{{ $code->country }}"
                                    data-network="{{ $code->network }}"
                                    data-status="{{ $code->status }}"
                                    data-launch_date="{{ $code->launch_date ? date('Y-m-d', strtotime($code->launch_date)) : '' }}"
                                    data-expiry_date="{{ $code->expiry_date ? date('Y-m-d', strtotime($code->expiry_date)) : '' }}"
                                    data-remarks="{{ $code->remarks }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form action="{{ route('shortcodes.destroy', $code->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-light text-danger btn-delete-record">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-4 text-secondary">No short codes found matching your criteria.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="p-3 border-top">
            {{ $shortcodes->links('pagination::bootstrap-5') }}
        </div>
    </div>
@endsection

@push('modals')
    <!-- ADD/EDIT SHORT CODE MODAL -->
    <div class="modal fade" id="shortCodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold" id="shortCodeModalTitle">Add Short Code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="shortCodeForm" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <input type="hidden" id="shortCodeRecordId" name="id">
                        <div id="shortCodeModalAlert"></div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Short Code *</label>
                                <input type="text" name="shortcode" id="modal_shortcode" class="form-control" required placeholder="e.g. 1334">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Service Name / Label</label>
                                <input type="text" name="name" id="modal_name" class="form-control" placeholder="e.g. Banking Alert Line">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Client Assignment</label>
                                <select name="client_id" id="modal_client_id" class="form-select select2-field">
                                    <option value="">Internal / Unassigned</option>
                                    @foreach($clients as $client)
                                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Network Operator Link</label>
                                <select name="network" id="modal_network" class="form-select select2-field">
                                    <option value="">All Networks / General</option>
                                    @foreach($networkOperators as $mno)
                                        <option value="{{ $mno->name }}">{{ $mno->name }} ({{ $mno->country }})</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Code Type</label>
                                <select name="code_type" id="modal_code_type" class="form-select">
                                    <option value="sms">SMS</option>
                                    <option value="ussd">USSD</option>
                                    <option value="voice">Voice</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Toll Free?</label>
                                <select name="toll_free" id="modal_toll_free" class="form-select">
                                    <option value="NO">NO</option>
                                    <option value="YES">YES</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Monthly Fee ($)</label>
                                <input type="number" step="0.01" name="monthly_fee" id="modal_monthly_fee" class="form-control" value="0.00">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Country</label>
                                <select name="country" id="modal_country" class="form-select select2-field">
                                    <option value="">Select Country</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->en_short_name }}">{{ $country->en_short_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Launch Date</label>
                                <input type="date" name="launch_date" id="modal_launch_date" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-secondary fw-semibold small">Expiry Date</label>
                                <input type="date" name="expiry_date" id="modal_expiry_date" class="form-control">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label text-secondary fw-semibold small">Status</label>
                                <select name="status" id="modal_status" class="form-select">
                                    <option value="Active">Active</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Expired">Expired</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label text-secondary fw-semibold small">Remarks / Notes</label>
                                <textarea name="remarks" id="modal_remarks" class="form-control" rows="2" placeholder="Optional context..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="btnSubmitShortCode" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">Save Short Code</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // --- HANDLE DELETE CONFIRMATION ---
            $('.btn-delete-record').on('click', function() {
                const $form = $(this).closest('form');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You are about to delete this short code. This action cannot be undone!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444', // Red confirm button
                    cancelButtonColor: '#6c757d',  // Gray cancel button
                    confirmButtonText: '<i class="bi bi-trash me-1"></i> Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $form.submit();
                    }
                });
            });
            const shortCodeModal = new bootstrap.Modal(document.getElementById('shortCodeModal'));
            const $form = $('#shortCodeForm');

            // Initialize Select2 inside the modal
            $('.select2-field').select2({
                placeholder: "Select an option",
                allowClear: true,
                width: '100%',
                dropdownParent: $('#shortCodeModal')
            });

            // Open Modal for Create
            $('#btnOpenShortCodeModal').on('click', function() {
                $form[0].reset();
                $('#shortCodeRecordId').val('');
                $('.select2-field').val(null).trigger('change');
                
                $('#shortCodeModalTitle').text('Add Short Code');
                $('#btnSubmitShortCode').html('Save Short Code');
                
                shortCodeModal.show();
            });

            // Open Modal for Edit
            $('.btn-edit-shortcode').on('click', function() {
                const data = $(this).data();
                
                $form[0].reset();
                $('#shortCodeRecordId').val(data.id);
                $('#modal_shortcode').val(data.shortcode);
                $('#modal_name').val(data.name);
                $('#modal_client_id').val(data.client_id).trigger('change');
                $('#modal_network').val(data.network).trigger('change');
                $('#modal_code_type').val(data.code_type);
                $('#modal_toll_free').val(data.toll_free);
                $('#modal_monthly_fee').val(data.monthly_fee);
                $('#modal_country').val(data.country).trigger('change');
                $('#modal_launch_date').val(data.launch_date);
                $('#modal_expiry_date').val(data.expiry_date);
                $('#modal_status').val(data.status);
                $('#modal_remarks').val(data.remarks);

                $('#shortCodeModalTitle').text('Edit Short Code: ' + data.shortcode);
                $('#btnSubmitShortCode').html('Update Short Code');
                
                shortCodeModal.show();
            });

            // Handle AJAX Form Submission
            $form.on('submit', function(e) {
                e.preventDefault();
                
                const $btn = $('#btnSubmitShortCode');
                const originalText = $btn.html();
                const $alertBox = $('#shortCodeModalAlert');
                
                $btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Processing...');
                $btn.prop('disabled', true);
                $alertBox.html(''); 
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').remove();

                const recordId = $('#shortCodeRecordId').val();
                const submitUrl = recordId ? "{{ url('shortcodes') }}/" + recordId : "{{ url('shortcodes') }}";
                
                let formData = $form.serialize();
                if (recordId) {
                    formData += '&_method=PUT';
                }

                $.ajax({
                    url: submitUrl,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            shortCodeModal.hide();
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                confirmButtonColor: '#5c4df0'
                            }).then(() => {
                                location.reload();
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $alertBox.html(`
                                <div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <div>Please check the highlighted fields below.</div>
                                </div>
                            `);
                            $.each(errors, function(key, value) {
                                let $input = $form.find('[name="' + key + '"]');
                                if ($input.length) {
                                    $input.addClass('is-invalid');
                                    $input.parent().append('<div class="invalid-feedback d-block fw-medium small">' + value[0] + '</div>');
                                }
                            });
                        } else {
                            $alertBox.html(`
                                <div class="alert alert-danger d-flex align-items-center py-2 px-3 small" role="alert">
                                    <i class="bi bi-x-circle-fill me-2"></i>
                                    <div>An unexpected server error occurred.</div>
                                </div>
                            `);
                        }
                    },
                    complete: function() {
                        $btn.html(originalText).prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endpush