@extends('layouts.masterbeta')

@section('title', 'Click ERP - VPN Management')

@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>
    <span class="fw-bold" style="font-size: 0.95rem;">VPN Management</span>
@endsection

@section('content')
     <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">VPN Management</h4>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage IPsec configurations with partners.</p>
        </div>
        <div class="d-flex gap-2">
            <!-- Global Standard Template Export -->
            <a href="{{ route('vpns.standard-template') }}" class="btn btn-outline-dark fw-bold d-flex align-items-center" style="border-radius: 8px;">
                <i class="bi bi-file-earmark-arrow-down me-2"></i> Standard Parameters
            </a>
            
            <button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#addVpnModal">
                <i class="bi bi-plus-lg me-2"></i> Add VPN Config
            </button>
        </div>
    </div>

    <div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
        <!-- Filters Header -->
        <div class="p-3 border-bottom bg-light bg-opacity-50">
            <div class="row g-3 align-items-center">
                <div class="col-md-5">
                    <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" class="form-control bg-white border-start-0 ps-0" id="searchVpn" placeholder="Search by partner name or IP...">
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-secondary" style="font-size: 0.85rem;">
                    <tr>
                        <th class="ps-4">Partner</th>
                        <th>Gateways (Local ➔ Peer)</th>
                        <th>Encryption Domains (Local ➔ Remote)</th>
                        <th>Status</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($vpns as $vpn)
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ $vpn->partner_name }}</td>
                            <td>
                                <div class="font-monospace small">
                                    <span class="text-primary">{{ $vpn->local_ip }}</span>
                                    <i class="bi bi-arrow-right mx-1 text-secondary"></i>
                                    <span class="text-danger">{{ $vpn->peer_ip }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="font-monospace small text-secondary">
                                    {{ $vpn->encryption_domain_local ?? 'Any' }} 
                                    <i class="bi bi-arrow-right mx-1"></i> 
                                    {{ $vpn->encryption_domain_remote ?? 'Any' }}
                                </div>
                            </td>
                            <td>
                                <span class="badge {{ $vpn->status == 'Active' ? 'bg-success' : 'bg-warning' }} bg-opacity-10 text-{{ $vpn->status == 'Active' ? 'success' : 'warning' }}">
                                    {{ $vpn->status }}
                                </span>
                            </td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-outline-dark fw-bold btn-export-vpn me-2" data-id="{{ $vpn->id }}">
                                    <i class="bi bi-download me-1"></i> Export
                                </button>
                                <button class="btn btn-sm btn-light text-primary btn-edit-vpn" data-id="{{ $vpn->id }}" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-secondary">
                                <i class="bi bi-shield-slash fs-1 text-muted mb-2 d-block"></i>
                                No VPN configurations added yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($vpns->hasPages())
            <div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
                {{ $vpns->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
@endsection

@push('modals')
    <!-- ADD VPN MODAL -->
    <div class="modal fade" id="addVpnModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light border-bottom-0">
                    <h5 class="modal-title fw-bold">Add VPN Configuration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="addVpnForm">
                    @csrf
                    <div class="modal-body p-0">
                        <ul class="nav nav-tabs px-4 pt-3 bg-light" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#tab-basic" type="button">Basic Info</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase1" type="button">Phase 1 (IKE)</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link fw-bold text-dark" data-bs-toggle="tab" data-bs-target="#tab-phase2" type="button">Phase 2 (IPSec)</button>
                            </li>
                        </ul>

                        <div class="tab-content p-4">
                            <!-- TAB 1: BASIC INFO -->
                            <div class="tab-pane fade show active" id="tab-basic">
                                <!-- Place your existing Partner Name, Status, IPs, Subnets, and PSK fields here -->
                                <div class="row g-3">
                                     <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Local Device</label>
                                        <input type="text" class="form-control" name="local_device" placeholder="e.g. Cisco Catalyst 8500">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Peer Device</label>
                                        <input type="text" class="form-control" name="peer_device" placeholder="e.g. FortiGate 61E">
                                    </div>
                                    <!-- ... existing gateway/subnet inputs ... -->
                                </div>
                            </div>

                            <!-- TAB 2: PHASE 1 (IKE) -->
                            <div class="tab-pane fade" id="tab-phase1">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label text-secondary fw-semibold small">IKE Version *</label>
                                        <select class="form-select" name="ike_version">
                                            <option value="1">v1</option>
                                            <option value="2" selected>v2</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-secondary fw-semibold small">Encryption *</label>
                                        <select class="form-select" name="phase1_encryption">
                                            <option value="AES-128">AES-128</option>
                                            <option value="AES-256" selected>AES-256</option>
                                            <option value="3DES">3DES</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-secondary fw-semibold small">Hash *</label>
                                        <select class="form-select" name="phase1_hash">
                                            <option value="SHA-1">SHA-1</option>
                                            <option value="SHA-256" selected>SHA-256</option>
                                            <option value="SHA-512">SHA-512</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">DH Group *</label>
                                        <select class="form-select" name="phase1_dh_group">
                                            <option value="2">Group 2</option>
                                            <option value="14" selected>Group 14</option>
                                            <option value="21">Group 21</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Lifetime (Seconds) *</label>
                                        <input type="number" class="form-control" name="phase1_lifetime" value="28800" required>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB 3: PHASE 2 (IPSEC) -->
                            <div class="tab-pane fade" id="tab-phase2">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Encryption *</label>
                                        <select class="form-select" name="phase2_encryption">
                                            <option value="AES-128">AES-128</option>
                                            <option value="AES-256" selected>AES-256</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Hash *</label>
                                        <select class="form-select" name="phase2_hash">
                                            <option value="SHA-1">SHA-1</option>
                                            <option value="SHA-256" selected>SHA-256</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-secondary fw-semibold small">DH Group</label>
                                        <select class="form-select" name="phase2_dh_group">
                                            <option value="">Match Phase 1</option>
                                            <option value="14">Group 14</option>
                                            <option value="21">Group 21</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label text-secondary fw-semibold small">Lifetime (Secs) *</label>
                                        <input type="number" class="form-control" name="phase2_lifetime" value="3600" required>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" name="pfs_enabled" value="1" checked id="pfsSwitch">
                                            <label class="form-check-label text-secondary fw-semibold small" for="pfsSwitch">Enable PFS</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light border-top-0">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="btnSaveVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
                            Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- EDIT VPN MODAL -->
    <div class="modal fade" id="editVpnModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light border-bottom-0">
                    <h5 class="modal-title fw-bold">Edit VPN Configuration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="editVpnForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit_vpn_id">
                    
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Partner Name *</label>
                                <input type="text" class="form-control" name="partner_name" id="edit_partner_name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Status *</label>
                                <select class="form-select" name="status" id="edit_status" required>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                            </div>

                            <div class="col-12 mt-4 mb-2 border-bottom pb-2">
                                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-router me-2"></i>Gateway IP Addresses</h6>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Local Gateway IP *</label>
                                <input type="text" class="form-control font-monospace" name="local_ip" id="edit_local_ip" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Peer Gateway IP *</label>
                                <input type="text" class="form-control font-monospace" name="peer_ip" id="edit_peer_ip" required>
                            </div>

                            <div class="col-12 mt-4 mb-2 border-bottom pb-2">
                                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-diagram-3 me-2"></i>Encryption Domains (Subnets)</h6>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Local Encryption Domain</label>
                                <input type="text" class="form-control font-monospace" name="encryption_domain_local" id="edit_encryption_domain_local">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold small">Remote Encryption Domain</label>
                                <input type="text" class="form-control font-monospace" name="encryption_domain_remote" id="edit_encryption_domain_remote">
                            </div>

                            <div class="col-12 mt-4 mb-2 border-bottom pb-2">
                                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-key me-2"></i>Authentication</h6>
                            </div>

                            <div class="col-12">
                                <label class="form-label text-secondary fw-semibold small">Update Pre-Shared Key (PSK)</label>
                                <input type="password" class="form-control font-monospace" name="preshared_key" placeholder="Leave blank to keep current PSK">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light border-top-0">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="btnUpdateVpn" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
                            Update Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- EXPORT VPN CONFIG MODAL -->
    <div class="modal fade" id="exportVpnModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white border-bottom-0">
                    <h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-code me-2"></i>Export Partner Config</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form action="{{ route('vpns.download') }}" method="POST">
                    @csrf
                    <input type="hidden" name="partner_name" id="export_partner_name">
                    
                    <div class="modal-body p-4">
                        <div class="alert alert-info py-2 d-flex align-items-center" style="font-size: 0.85rem;">
                            <i class="bi bi-info-circle-fill me-2 fs-5"></i> 
                            <div>You can edit the configuration parameters below before downloading the file to share with the partner.</div>
                        </div>
                        
                        <div class="mb-3">
                            <textarea class="form-control font-monospace bg-light" name="config_content" id="export_config_content" rows="15" required style="font-size: 0.85rem; white-space: pre;"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer bg-light border-top-0 d-flex justify-content-between">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success btn-sm fw-bold px-4">
                            <i class="bi bi-download me-1"></i> Download .txt File
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            let baseUrl = "{{ url('/') }}";

            // 1. Add VPN Config
            $('#addVpnForm').on('submit', function(e) {
                e.preventDefault();
                let $form = $(this);
                let $btn = $('#btnSaveVpn');
                let originalText = $btn.html();

                $btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
                $form.find('.is-invalid').removeClass('is-invalid');

                $.ajax({
                    url: `${baseUrl}/vpns`,
                    type: 'POST',
                    data: $form.serialize(),
                    success: function(response) {
                        $('#addVpnModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Added!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            $.each(xhr.responseJSON.errors, function(key, value) {
                                let $input = $form.find('[name="' + key + '"]');
                                $input.addClass('is-invalid');
                                $input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
                            });
                        } else {
                            Swal.fire('Error', 'An unexpected error occurred.', 'error');
                        }
                    },
                    complete: function() {
                        $btn.html(originalText).prop('disabled', false);
                    }
                });
            });

            // 2. Fetch Data for Edit Modal
            $(document).on('click', '.btn-edit-vpn', function(e) {
                e.preventDefault();
                let vpnId = $(this).data('id');
                
                $.ajax({
                    url: `${baseUrl}/vpns/${vpnId}`,
                    type: 'GET',
                    success: function(vpn) {
                        $('#edit_vpn_id').val(vpn.id);
                        $('#edit_partner_name').val(vpn.partner_name);
                        $('#edit_local_ip').val(vpn.local_ip);
                        $('#edit_peer_ip').val(vpn.peer_ip);
                        $('#edit_encryption_domain_local').val(vpn.encryption_domain_local);
                        $('#edit_encryption_domain_remote').val(vpn.encryption_domain_remote);
                        $('#edit_status').val(vpn.status);
                        
                        $('#editVpnModal').modal('show');
                    }
                });
            });

            // 3. Update VPN Config
            $('#editVpnForm').on('submit', function(e) {
                e.preventDefault();
                let $form = $(this);
                let vpnId = $('#edit_vpn_id').val();
                let $btn = $('#btnUpdateVpn');
                let originalText = $btn.html();

                $btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Updating...').prop('disabled', true);
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').remove();

                $.ajax({
                    url: `${baseUrl}/vpns/${vpnId}`,
                    type: 'POST',
                    data: $form.serialize(),
                    success: function(response) {
                        $('#editVpnModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            $.each(xhr.responseJSON.errors, function(key, value) {
                                let $input = $form.find('[name="' + key + '"]');
                                $input.addClass('is-invalid');
                                $input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
                            });
                        }
                    },
                    complete: function() {
                        $btn.html(originalText).prop('disabled', false);
                    }
                });
            });

            // 4. Export VPN Configuration (Trigger Modal)
            $(document).on('click', '.btn-export-vpn', function(e) {
                e.preventDefault();
                let vpnId = $(this).data('id');
                let $btn = $(this);
                let originalHtml = $btn.html();

                $btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);

                $.ajax({
                    url: `${baseUrl}/vpns/${vpnId}/template`,
                    type: 'GET',
                    success: function(response) {
                        $('#export_partner_name').val(response.partner_name);
                        $('#export_config_content').val(response.template);
                        $('#exportVpnModal').modal('show');
                    },
                    error: function() {
                        Swal.fire('Error', 'Failed to generate configuration template.', 'error');
                    },
                    complete: function() {
                        $btn.html(originalHtml).prop('disabled', false);
                    }
                });
            });

            // Clean up modals on close
            $('#addVpnModal, #editVpnModal, #exportVpnModal').on('hidden.bs.modal', function () {
                $(this).find('form')[0].reset();
                $(this).find('.is-invalid').removeClass('is-invalid');
                $(this).find('.invalid-feedback').remove();
            });
        });
    </script>
@endpush