@extends('adminlte::page')
@section('title', 'Dashboard | Mintavia Admin')
@section('content')
    <style>
        #passkeyModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            font-family: 'Segoe UI', sans-serif;
        }

        .modal-content {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            width: 320px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .modal-content h4 {
            margin-bottom: 15px;
            font-size: 18px;
            color: #333;
        }

        .modal-content input[type="password"],
        .modal-content input[type="text"] {
            padding: 10px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 15px;
        }

        .modal-content label {
            font-size: 14px;
            margin-top: 10px;
            display: block;
            color: #555;
        }

        .modal-buttons {
            margin-top: 20px;
        }

        .modal-buttons button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            margin: 0 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .confirm-btn {
            background-color: #4caf50;
            color: #fff;
        }

        .cancel-btn {
            background-color: #e91e63;
            color: #fff;
        }

        .passkey-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .passkey-wrapper input {
            padding-right: 40px;
            /* for space for the eye */
        }

        #toggleEye {
            position: absolute;
            right: 10px;
            cursor: pointer;
            color: #555;
            font-size: 18px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

    <div class="row">
        <div class="col-12">
            <x-admin-notify></x-admin-notify>
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Company List</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.company.create') }}"
                            class="btn btn-sm btn-block btn-flat btn-light rounded-0 shadow" title="Create Company">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    {{-- <th class="text-center">Company Code</th> --}}
                                    <th class="text-center">Company Name</th>
                                    <th class="text-center">Financial Years</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($companies as $company)
                                    <tr>
                                        {{-- <td class="text-center" style="font-size:25px;">
                                            <span id="companyCode{{ $company->id }}" style="display:none;">
                                                {{ $company->company_code }}
                                            </span>
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                onclick="toggleCode({{ $company->id }})"
                                                style="font-size:14px; margin-left:8px;">
                                                View
                                            </button>
                                        </td> --}}

                                        <td class="text-center" style="font-size:25px;">{{ $company->company_name }}</td>
                                        <td style="font-size: 25px;">
                                            @if ($company->financial_years->isNotEmpty())
                                                @foreach ($company->financial_years as $fy)
                                                    <div
                                                        style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #ccc;">

                                                        {{-- FY Text --}}
                                                        <span>
                                                            {{ \Carbon\Carbon::parse($fy->start_date)->format('Y-M-d') }}
                                                            -
                                                            {{ \Carbon\Carbon::parse($fy->end_date)->format('Y-M-d') }}
                                                            (Created:
                                                            {{ \Carbon\Carbon::parse($fy->created_at)->format('Y-M-d') }})
                                                        </span>

                                                        {{-- Action Buttons --}}
                                                        <span>
                                                            {{-- ✅ Select Company --}}
                                                            <a href="{{ route('admin.company.select', $fy->id) }}"
                                                                style="background: #4caf50; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin-right: 5px;"
                                                                title="Select Company: {{ $company->company_name }}">
                                                                <i class="fas fa-arrow-right"></i>
                                                            </a>

                                                            {{-- ✅ Delete Financial Year --}}
                                                            <form action="{{ route('admin.delete', $fy->id) }}"
                                                                method="POST"
                                                                onsubmit="return confirmDeleteWithPasskey(event)"
                                                                style="display: inline;">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit"
                                                                    style="background: #f44336; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;"
                                                                    title="Delete Financial Year">
                                                                    <i class="fas fa-trash-alt"></i>
                                                                </button>
                                                            </form>
                                                        </span>

                                                    </div>
                                                @endforeach
                                            @else
                                                <span class="text-muted" style="font-size:16px;">No financial years</span>
                                            @endif
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
{{-- JS code --}}
{{-- <script>
    function toggleCode(id) {
        let codeSpan = document.getElementById("companyCode" + id);
        let btn = event.target;

        if (codeSpan.style.display === "none") {
            codeSpan.style.display = "inline";
            btn.textContent = "Hide";
        } else {
            codeSpan.style.display = "none";
            btn.textContent = "View";
        }
    }
</script> --}}

<script>
    let formToSubmit = null;

    function confirmDeleteWithPasskey(event) {
        event.preventDefault();
        formToSubmit = event.target;

        // Step 1: Ask confirmation
        const confirmed = confirm(
            "क्या आप वाकई हटाना चाहते हैं?\nAre you sure you want to delete?\nమీరు ఖచ్చితంగా తొలగించాలనుకుంటున్నారా?"
        );
        if (confirmed) {
            // Step 2: Show passkey modal
            showPasskeyModal();
        }

        return false;
    }

    function showPasskeyModal() {
        const modal = document.createElement('div');
        modal.id = 'passkeyModal';
        modal.innerHTML = `
            <div class="modal-content">
                <h4>पास की दर्ज करें<br>Enter Pass Key<br>పాస్‌కీ నమోదు చేయండి</h4>

                <div class="passkey-wrapper">
                    <input type="password" id="deletePasskeyInput" placeholder="••••" />
                    <span id="toggleEye" onclick="togglePasskeyVisibility()" title="Show/Hide Password">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>

                <div class="modal-buttons">
                    <button class="confirm-btn" onclick="validatePasskey()">OK</button>
                    <button class="cancel-btn" onclick="closeModal()">Cancel</button>
                </div>
            </div>

        `;
        document.body.appendChild(modal);
    }

    function togglePasskeyVisibility() {
        const input = document.getElementById('deletePasskeyInput');
        const eye = document.getElementById('toggleEye').firstElementChild;

        if (input.type === 'password') {
            input.type = 'text';
            eye.classList.remove('fa-eye');
            eye.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            eye.classList.remove('fa-eye-slash');
            eye.classList.add('fa-eye');
        }
    }


    function closeModal() {
        const modal = document.getElementById('passkeyModal');
        if (modal) modal.remove();
    }

    function validatePasskey() {
        const passkey = document.getElementById('deletePasskeyInput').value;
        if (passkey === '1212') {
            closeModal();
            formToSubmit.submit();
        } else {
            alert("❌ गलत पास की है!\nWrong Pass Key!\nతప్పు పాస్‌కీ!");
            closeModal();
        }
    }
</script>