@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .treasury-form-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            overflow: hidden;
        }

        .treasury-form-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .treasury-form-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .treasury-form-head__icon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .treasury-form-head__title {
            color: #111827;
            font-size: 1.12rem !important;
            font-weight: 950;
            margin: 0;
            line-height: 1.25;
        }

        .treasury-form-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin: 0.2rem 0 0;
        }

        .treasury-form-body {
            padding: 1.25rem;
        }

        .form-section {
            border: 1px solid #eef2f7;
            border-radius: 20px;
            background: #fff;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .form-section__head {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 0.9rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #2563eb;
            border: 1px solid #e5e7eb;
            flex-shrink: 0;
        }

        .form-section__title {
            color: #111827;
            font-size: 1rem !important;
            font-weight: 900;
            margin: 0;
        }

        .form-section__sub {
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
            margin: 0.15rem 0 0;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .asset-label,
        .form-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .treasury-form-page .form-control,
        .treasury-form-page .form-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .treasury-form-page .select2-container {
            width: 100% !important;
        }

        .treasury-form-page .select2-container--default .select2-selection--multiple {
            min-height: 46px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.25rem 0.35rem;
            background: #fff;
            transition: 0.2s ease;
        }

        .treasury-form-page .select2-container--default.select2-container--focus .select2-selection--multiple,
        .treasury-form-page .select2-container--default .select2-selection--multiple:hover {
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .treasury-form-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border: 0;
            border-radius: 999px;
            background: #eef6f7;
            color: #0f5f66;
            font-size: 0.82rem;
            font-weight: 800;
            padding: 0.25rem 0.6rem;
            margin-top: 0.25rem;
        }

        .treasury-form-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            border: 0;
            color: #0f5f66;
            margin-right: 0.3rem;
        }

        .treasury-form-page .select2-container--default .select2-search--inline .select2-search__field {
            min-height: 30px;
            margin-top: 0.3rem;
            font-size: 0.9rem;
        }

        .asset-input:focus,
        .asset-select:focus,
        .treasury-form-page .form-control:focus,
        .treasury-form-page .form-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .input-shell {
            position: relative;
        }

        .input-shell .input-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            font-size: 0.95rem;
            z-index: 2;
            pointer-events: none;
        }

        .input-shell .asset-input,
        .input-shell .asset-select {
            padding-left: 2.35rem;
        }

        .bank-fields-panel {
            border: 1px solid #fed7aa;
            border-left: 5px solid #f59e0b;
            border-radius: 20px;
            background: #fff7ed;
            padding: 1rem;
        }

        .bank-fields-panel__head {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            margin-bottom: 1rem;
        }

        .bank-fields-panel__icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            background: #fff;
            color: #c2410c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .bank-fields-panel__title {
            color: #111827;
            font-size: 0.98rem !important;
            font-weight: 900;
            margin: 0;
        }

        .bank-fields-panel__sub {
            color: #9a3412;
            font-size: 0.84rem;
            line-height: 1.45;
            margin: 0.15rem 0 0;
        }

        .instapay-note {
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            border-radius: 16px;
            padding: 0.85rem 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            font-size: 0.86rem;
            font-weight: 750;
            line-height: 1.5;
            margin-top: 0.75rem;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #f8fafc;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 42px;
            border-radius: 999px;
            padding: 0.65rem 1rem;
            font-size: 0.86rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
            border: 1px solid transparent;
            white-space: nowrap;
            cursor: pointer;
        }

        .asset-btn--primary {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .asset-btn--primary:hover {
            background: #1d4ed8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        @media (max-width: 991.98px) {
            .asset-col-6,
            .asset-col-4 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .treasury-form-head,
            .treasury-form-body,
            .form-section,
            .form-actions {
                padding: 1rem;
            }

            .form-actions .asset-btn {
                width: 100%;
            }
        }
    </style>

    <div class="container-fluid app-bg treasury-form-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="{{ isset($treasury) ? 'Edit Treasury' : 'Create New Treasury' }}"
                    description="{{ isset($treasury) ? 'Update treasury information, balance, assigned accounts, bank details, and status.' : 'Create a new cash or bank treasury with opening balance and assigned accounts.' }}">
                    <a href="{{ route('treasuries.index') }}" class="asset-btn asset-btn--secondary">
                        <i class="fas fa-arrow-left"></i>
                        Back to Treasuries
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="treasury-form-head">
                        <div class="treasury-form-head__main">
                            <div class="treasury-form-head__icon">
                                <i class="fas {{ isset($treasury) ? 'fa-edit' : 'fa-plus-circle' }}"></i>
                            </div>

                            <div>
                                <h5 class="treasury-form-head__title">
                                    {{ isset($treasury) ? 'Edit Treasury' : 'Create New Treasury' }}
                                </h5>
                                <p class="treasury-form-head__sub">
                                    Fill treasury base information, assigned accounts, treasury type, balance, currency, and bank details when applicable.
                                </p>
                            </div>
                        </div>

                        <span class="ui-pill {{ isset($treasury) ? 'ui-pill--warn' : 'ui-pill--success' }}">
                            <i class="fas {{ isset($treasury) ? 'fa-pen' : 'fa-plus' }}"></i>
                            {{ isset($treasury) ? 'Update Mode' : 'Create Mode' }}
                        </span>
                    </div>

                    <form action="{{ isset($treasury) ? route('treasuries.update', $treasury) : route('treasuries.store') }}" method="POST">
                        @csrf

                        @if (isset($treasury))
                            @method('PUT')
                        @endif

                        <div class="treasury-form-body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-info-circle"></i>
                                    </div>

                                    <div>
                                        <h6 class="form-section__title">Basic Information</h6>
                                        <p class="form-section__sub">
                                            Set treasury name and treasury type.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-6">
                                        <label class="asset-label">Name <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-tag input-icon"></i>
                                            <input type="text"
                                                   name="name"
                                                   class="asset-input"
                                                   placeholder="Enter treasury name"
                                                   value="{{ old('name', $treasury->name ?? '') }}"
                                                   required>
                                        </div>
                                    </div>

                                    <div class="asset-col-6">
                                        <label class="asset-label">Type <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-list input-icon"></i>
                                            <select name="type" id="treasury_type" class="asset-select" required>
                                                <option value="Cash" {{ old('type', $treasury->type ?? 'Cash') == 'Cash' ? 'selected' : '' }}>
                                                    Cash
                                                </option>
                                                <option value="Bank" {{ old('type', $treasury->type ?? '') == 'Bank' ? 'selected' : '' }}>
                                                    Bank
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="asset-col-6">
                                        <label class="asset-label">Payment Flow <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-credit-card input-icon"></i>
                                            <select name="payment_flow" id="payment_flow" class="asset-select" required>
                                                <option value="manual" {{ old('payment_flow', $treasury->payment_flow ?? 'manual') == 'manual' ? 'selected' : '' }}>
                                                    Manual
                                                </option>
                                                <option value="online" {{ old('payment_flow', $treasury->payment_flow ?? '') == 'online' ? 'selected' : '' }}>
                                                    Online
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="asset-col-6">
                                        <label class="asset-label">Payment Region <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-globe-africa input-icon"></i>
                                            <select name="payment_region" class="asset-select" required>
                                                <option value="inside_egypt" {{ old('payment_region', $treasury->payment_region ?? 'both') == 'inside_egypt' ? 'selected' : '' }}>
                                                    Inside Egypt
                                                </option>
                                                <option value="outside_egypt" {{ old('payment_region', $treasury->payment_region ?? 'both') == 'outside_egypt' ? 'selected' : '' }}>
                                                    Outside Egypt
                                                </option>
                                                <option value="both" {{ old('payment_region', $treasury->payment_region ?? 'both') == 'both' ? 'selected' : '' }}>
                                                    Both
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="asset-col-6">
                                        <label class="asset-label">Available In Payment Methods?</label>
                                        <div class="input-shell">
                                            <i class="fas fa-toggle-on input-icon"></i>
                                            <select name="is_payment_available" class="asset-select">
                                                <option value="0" {{ (string) old('is_payment_available', isset($treasury) ? (int) ($treasury->is_payment_available ?? 0) : 0) === '0' ? 'selected' : '' }}>
                                                    No
                                                </option>
                                                <option value="1" {{ (string) old('is_payment_available', isset($treasury) ? (int) ($treasury->is_payment_available ?? 0) : 0) === '1' ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-layer-group"></i>
                                    </div>

                                    <div>
                                        <h6 class="form-section__title">Accounts</h6>
                                        <p class="form-section__sub">
                                            Choose one or more chart accounts assigned to this treasury.
                                        </p>
                                    </div>
                                </div>

                                @php
                                    $selectedLinkedAccounts = old('linked_account_ids', $selectedLinkedAccountIds ?? []);
                                    $selectedLinkedAccounts = is_array($selectedLinkedAccounts) ? $selectedLinkedAccounts : [];
                                    $selectedLinkedAccounts = array_map('intval', $selectedLinkedAccounts);
                                @endphp

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label class="asset-label">Accounts <span class="text-danger">*</span></label>
                                        <select
                                            name="linked_account_ids[]"
                                            id="treasury_account_ids"
                                            class="asset-select treasury-account-select"
                                            multiple
                                            required
                                            data-placeholder="Select accounts"
                                        >
                                            @foreach (($accounts ?? collect()) as $account)
                                                <option value="{{ $account->id }}" {{ in_array((int) $account->id, $selectedLinkedAccounts, true) ? 'selected' : '' }}>
                                                    {{ $account->code }} - {{ $account->title }}
                                                </option>
                                            @endforeach
                                        </select>

                                        <div class="instapay-note mt-3">
                                            <i class="fas fa-circle-info"></i>
                                            <div>
                                                Select all accounts connected to this treasury.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section" id="bank_fields" style="display: {{ old('type', $treasury->type ?? 'Cash') == 'Bank' ? 'block' : 'none' }}">
                                <div class="bank-fields-panel">
                                    <div class="bank-fields-panel__head">
                                        <div class="bank-fields-panel__icon">
                                            <i class="fas fa-university"></i>
                                        </div>

                                        <div>
                                            <h6 class="bank-fields-panel__title">Bank Details</h6>
                                            <p class="bank-fields-panel__sub">
                                                These fields are required when treasury type is Bank.
                                            </p>
                                        </div>
                                    </div>

                                    <div class="asset-form-grid">
                                        <div class="asset-col-6">
                                            <label class="asset-label">Bank Name <span class="text-danger">*</span></label>
                                            <div class="input-shell">
                                                <i class="fas fa-university input-icon"></i>
                                                <input type="text"
                                                       name="bank_name"
                                                       class="asset-input"
                                                       placeholder="e.g. National Bank"
                                                       value="{{ old('bank_name', $treasury->bank_name ?? '') }}">
                                            </div>
                                        </div>

                                        <div class="asset-col-6" id="account_name_field" style="display: {{ old('payment_flow', $treasury->payment_flow ?? 'manual') === 'manual' ? 'block' : 'none' }}">
                                            <label class="asset-label" for="account_name">Account Name</label>
                                            <div class="input-shell">
                                                <i class="fas fa-user input-icon"></i>
                                                <input type="text" id="account_name" name="account_name"
                                                       class="asset-input" maxlength="255"
                                                       placeholder="Enter account holder name"
                                                       value="{{ old('account_name', $treasury->account_name ?? '') }}">
                                            </div>
                                        </div>

                                        <div class="asset-col-6">
                                            <label class="asset-label">Account Number <span class="text-danger">*</span></label>
                                            <div class="input-shell">
                                                <i class="fas fa-id-card input-icon"></i>
                                                <input type="text"
                                                       name="account_number"
                                                       class="asset-input"
                                                       placeholder="Enter account number"
                                                       value="{{ old('account_number', $treasury->account_number ?? '') }}">
                                            </div>
                                        </div>

                                        <div class="asset-col-6">
                                            <label class="asset-label">IBAN</label>
                                            <div class="input-shell">
                                                <i class="fas fa-barcode input-icon"></i>
                                                <input type="text"
                                                       name="iban"
                                                       class="asset-input"
                                                       placeholder="Enter IBAN"
                                                       value="{{ old('iban', $treasury->iban ?? '') }}">
                                            </div>
                                        </div>

                                        <div class="asset-col-6">
                                            <label class="asset-label">Has InstaPay?</label>
                                            <div class="input-shell">
                                                <i class="fas fa-mobile-alt input-icon"></i>
                                                <select name="has_insta_pay" id="has_insta_pay" class="asset-select">
                                                    <option value=""> </option>
                                                    <option value="0" {{ (string) old('has_insta_pay', isset($treasury) ? (int) ($treasury->has_insta_pay ?? 0) : 0) === '0' ? 'selected' : '' }}>
                                                        No
                                                    </option>
                                                    <option value="1" {{ (string) old('has_insta_pay', isset($treasury) ? (int) ($treasury->has_insta_pay ?? 0) : 0) === '1' ? 'selected' : '' }}>
                                                        Yes
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="asset-col-6" id="instapay_phone_field" style="display: none;">
                                            <label class="asset-label">InstaPay Phone Number <span class="text-danger">*</span></label>
                                            <div class="input-shell">
                                                <i class="fas fa-phone input-icon"></i>
                                                <input type="text"
                                                       name="insta_pay_phone"
                                                       class="asset-input"
                                                       placeholder="01xxxxxxxxx"
                                                       value="{{ old('insta_pay_phone', $treasury->insta_pay_phone ?? '') }}">
                                            </div>

                                            <div class="instapay-note">
                                                <i class="fas fa-info-circle"></i>
                                                <div>InstaPay phone appears only when treasury type is Bank and Has InstaPay is Yes.</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-wallet"></i>
                                    </div>

                                    <div>
                                        <h6 class="form-section__title">Balance & Status</h6>
                                        <p class="form-section__sub">
                                            Set opening balance, currency, and active status.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-4">
                                        <label class="asset-label">Opening Balance <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-wallet input-icon"></i>
                                            <input type="number"
                                                   step="0.01"
                                                   name="opening_balance"
                                                   class="asset-input"
                                                   placeholder="0.00"
                                                   value="{{ old('opening_balance', $treasury->opening_balance ?? 0) }}"
                                                   required>
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Currency <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-coins input-icon"></i>
                                            <input type="text"
                                                   name="currency"
                                                   class="asset-input"
                                                   placeholder="e.g. EGP"
                                                   value="{{ old('currency', $treasury->currency ?? 'EGP') }}"
                                                   required>
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Status <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-toggle-on input-icon"></i>
                                            <select name="status" class="asset-select" required>
                                                <option value="Active" {{ old('status', $treasury->status ?? 'Active') == 'Active' ? 'selected' : '' }}>
                                                    Active
                                                </option>
                                                <option value="Inactive" {{ old('status', $treasury->status ?? '') == 'Inactive' ? 'selected' : '' }}>
                                                    Inactive
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <a href="{{ route('treasuries.index') }}" class="asset-btn asset-btn--secondary">
                                Cancel
                            </a>

                            <button type="submit" class="asset-btn asset-btn--primary">
                                <i class="fas fa-save"></i>
                                {{ isset($treasury) ? 'Update Treasury' : 'Save Treasury' }}
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <script>
        function syncBankFields() {
            const type = document.getElementById('treasury_type').value;
            const bankFields = document.getElementById('bank_fields');

            if (type === 'Bank') {
                bankFields.style.display = 'block';
            } else {
                bankFields.style.display = 'none';
            }

            const showAccountName = type === 'Bank' && document.getElementById('payment_flow').value === 'manual';
            document.getElementById('account_name_field').style.display = showAccountName ? 'block' : 'none';
            document.getElementById('account_name').disabled = !showAccountName;
            syncInstaPayField();
        }

        function syncInstaPayField() {
            const type = document.getElementById('treasury_type').value;
            const hasInstaPay = document.getElementById('has_insta_pay');
            const phoneField = document.getElementById('instapay_phone_field');

            if (!hasInstaPay || !phoneField) {
                return;
            }

            const show = type === 'Bank' && hasInstaPay.value === '1';
            phoneField.style.display = show ? 'block' : 'none';
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('payment_flow').addEventListener('change', syncBankFields);
            const treasuryType = document.getElementById('treasury_type');
            const hasInstaPay = document.getElementById('has_insta_pay');

            if (window.jQuery && jQuery.fn.select2) {
                $('.treasury-account-select').select2({
                    placeholder: $('.treasury-account-select').data('placeholder') || 'Select accounts',
                    closeOnSelect: false,
                    width: '100%'
                });
            }

            if (treasuryType) {
                treasuryType.addEventListener('change', syncBankFields);
            }

            if (hasInstaPay) {
                hasInstaPay.addEventListener('change', syncInstaPayField);
            }

            syncBankFields();
        });
    </script>
@endsection