@extends('Admin.layout')

@section('content')

    <style>
        /* ===============================
                       INTEREST POLICY PAGE
                    ================================ */

        .policy-page-card {
            background: rgba(10, 22, 40, .55) !important;
            border: 1px solid var(--glass-border) !important;
            border-radius: 12px;
            color: var(--ink);
        }

        /* Header */
        .policy-page-title {
            color: var(--gold-soft) !important;
            font-weight: 700;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        .policy-back-btn {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--gold-soft) !important;
            border: 1px solid var(--glass-border) !important;
            background: rgba(226, 182, 92, .06) !important;
            border-radius: 7px;
        }

        .policy-back-btn:hover {
            color: var(--gold) !important;
            background: rgba(226, 182, 92, .12) !important;
            border-color: rgba(226, 182, 92, .35) !important;
        }

        /* Section */
        .policy-section {
            background: rgba(10, 22, 40, .38);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
        }

        .policy-section-title {
            color: var(--gold-soft) !important;
            font-size: .88rem;
            font-weight: 700;
        }

        .policy-icon {
            color: var(--gold-soft);
            font-size: 1.15rem;
        }

        /* Labels */
        .policy-form-label {
            color: var(--ink-dim) !important;
            font-size: .75rem;
            font-weight: 500;
            margin-bottom: .35rem;
        }

        /* Inputs */
        .policy-form-control,
        .policy-form-select {
            background: rgba(255, 255, 255, .035) !important;
            border: 1px solid var(--glass-border) !important;
            color: var(--ink) !important;
            border-radius: 7px;
            font-size: .8rem;
        }

        .policy-form-control::placeholder {
            color: var(--ink-dim) !important;
            opacity: .55;
        }

        .policy-form-control:focus,
        .policy-form-select:focus {
            background: rgba(255, 255, 255, .045) !important;
            border-color: rgba(226, 182, 92, .5) !important;
            box-shadow: 0 0 0 .15rem rgba(226, 182, 92, .08) !important;
            color: var(--ink) !important;
        }

        .policy-form-select option {
            background: #0a1628;
            color: var(--ink);
        }

        /* Percentage input */
        .policy-input-group .policy-form-control {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .policy-input-group .input-group-text {
            background: rgba(226, 182, 92, .08) !important;
            border: 1px solid var(--glass-border) !important;
            border-left: 0 !important;
            color: var(--gold-soft) !important;
            font-weight: 600;
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        /* Actions */
        .policy-actions {
            border-top: 1px solid var(--glass-border);
            padding-top: 1rem;
        }

        .policy-cancel-btn {
            color: var(--ink-dim) !important;
            border: 1px solid var(--glass-border) !important;
            background: rgba(255, 255, 255, .025) !important;
            border-radius: 7px;
        }

        .policy-cancel-btn:hover {
            color: var(--ink) !important;
            background: rgba(255, 255, 255, .06) !important;
        }

        .policy-save-btn {
            background: var(--gold) !important;
            border-color: var(--gold) !important;
            color: #111 !important;
            font-weight: 700;
            border-radius: 7px;
        }

        .policy-save-btn:hover {
            background: var(--gold-soft) !important;
            border-color: var(--gold-soft) !important;
            color: #111 !important;
        }

        /* Mobile */
        @media (max-width: 767.98px) {

            .policy-page-card {
                border-radius: 9px;
            }

            .policy-section {
                padding: .75rem !important;
            }

            .policy-page-title {
                font-size: .95rem;
            }

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


    <div class="card p-2 p-md-3 policy-page-card">

        <!-- Header -->
        <div class="d-flex align-items-center justify-content-between mb-3">

            <h5 class="mb-0 policy-page-title">

                <a href="{{ route('policy') }}" class="btn policy-back-btn me-2">

                    <i class="ti ti-arrow-left"></i>

                </a>

                Add Interest Policy

            </h5>

        </div>


        <!-- Form Section -->
        <div class="policy-section p-2 p-md-3">

            <div class="d-flex align-items-center gap-2 mb-3">

                <i class="ti ti-percentage policy-icon"></i>

                <h6 class="mb-0 policy-section-title">
                    Policy Details
                </h6>

            </div>


            <form action="{{ route('create_policy') }}" method="POST" id="policyForm">
                @csrf
                <div class="row g-2 g-md-3">

                    <!-- Policy Name -->
                    <div class="col-12 col-md-6">

                        <label class="policy-form-label">
                            Policy Name
                            <span class="text-danger">*</span>
                        </label>

                        <input type="text" name="policy_name" value="{{ old('policy_name') }}"
                            class="form-control form-control-sm policy-form-control" placeholder="Enter policy name">

                    </div>


                    <!-- Interest Rate -->
                    <div class="col-12 col-md-6">

                        <label class="policy-form-label">
                            Interest Rate
                            <span class="text-danger">*</span>
                        </label>

                        <div class="input-group input-group-sm policy-input-group">

                            <input type="number" name="interest_rate" class="form-control policy-form-control"
                                placeholder="Enter interest rate" step="0.01" min="0" value="{{ old('interest_rate') }}">

                            <span class="input-group-text">
                                %
                            </span>

                        </div>

                    </div>



                    <!-- Description -->
                    <div class="col-12">

                        <label class="policy-form-label">
                            Description
                        </label>

                        <textarea name="description" class="form-control form-control-sm policy-form-control" rows="3"
                            placeholder="Enter policy description">{{ old('description') }}</textarea>

                    </div>

                </div>


                <!-- Actions -->
                <div class="policy-actions mt-4">

                    <div class="d-flex flex-column flex-md-row justify-content-end gap-2">

                        <a href="{{ route('policy') }}" class="btn btn-sm policy-cancel-btn px-4">

                            <i class="ti ti-x me-1"></i>

                            Cancel

                        </a>


                        <button type="submit" class="btn btn-sm policy-save-btn px-4">

                            <i class="ti ti-percentage me-1"></i>

                            Save Policy

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('policyForm');
            if (!form) return;

            const button = form.querySelector('button[type="submit"]');
            const originalHtml = button.innerHTML;

            form.addEventListener('submit', function () {
                setTimeout(() => {
                    button.disabled = true;
                    button.innerHTML = `
                        <span class="spinner-border spinner-border-sm me-1"
                              role="status" aria-hidden="true"></span>
                        Processing...
                    `;
                }, 0);
            });

            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    button.disabled = false;
                    button.innerHTML = originalHtml;
                }
            });
        });
    </script>
@endsection