@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 -->
    <!-- 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" novalidate>
                    @csrf
                    <div class="modal-body p-0">
                        <!-- Modal Navigation Tabs -->
                        <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="#add-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="#add-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="#add-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="add-tab-basic">
                                <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" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Status *</label>
                                        <select class="form-select" name="status" required>
                                            <option value="Active" selected>Active</option>
                                            <option value="Inactive">Inactive</option>
                                        </select>
                                    </div>

                                    <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>

                                    <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" 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" 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" placeholder="e.g. 10.0.0.0/24">
                                    </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">
                                    </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">Pre-Shared Key (PSK) *</label>
                                        <input type="password" class="form-control font-monospace" name="preshared_key" required>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB 2: PHASE 1 (IKE) -->
                            <div class="tab-pane fade" id="add-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="add-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>
                                            <option value="3DES">3DES</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">SHA</option>
                                            <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="addPfsSwitch">
                                            <label class="form-check-label text-secondary fw-semibold small" for="addPfsSwitch">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 -->
    <!-- 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" novalidate>
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit_vpn_id">
                    
                    <div class="modal-body p-0">
                        <!-- Modal Navigation Tabs -->
                        <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="#edit-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="#edit-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="#edit-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="edit-tab-basic">
                                <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-md-6">
                                        <label class="form-label text-secondary fw-semibold small">Local Device</label>
                                        <input type="text" class="form-control" name="local_device" id="edit_local_device">
                                    </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" id="edit_peer_device">
                                    </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>

                            <!-- TAB 2: PHASE 1 (IKE) -->
                            <div class="tab-pane fade" id="edit-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" id="edit_ike_version">
                                            <option value="1">v1</option>
                                            <option value="2">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" id="edit_phase1_encryption">
                                            <option value="AES-128">AES-128</option>
                                            <option value="AES-256">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" id="edit_phase1_hash">
                                            <option value="SHA-1">SHA-1</option>
                                            <option value="SHA-256">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" id="edit_phase1_dh_group">
                                            <option value="2">Group 2</option>
                                            <option value="14">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" id="edit_phase1_lifetime" required>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB 3: PHASE 2 (IPSEC) -->
                            <div class="tab-pane fade" id="edit-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" id="edit_phase2_encryption">
                                            <option value="AES-128">AES-128</option>
                                            <option value="AES-256">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" id="edit_phase2_hash">
                                            <option value="SHA-1">SHA-1</option>
                                            <option value="SHA-256">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" id="edit_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" id="edit_phase2_lifetime" 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" id="edit_pfs_enabled">
                                            <label class="form-check-label text-secondary fw-semibold small" for="edit_pfs_enabled">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="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 src="{{ asset('public/assets/js/vpn-index.js') }}"></script>
@endpush