@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"
                       required>

                @error('policy_name')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </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') }}"
                           required>

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

                @error('interest_rate')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>


            <!-- Interest Overdue Months -->
            <div class="col-12 col-md-6">
                <label class="policy-form-label">
                    Interest Overdue Months
                    <span class="text-danger">*</span>
                </label>

                <input type="number"
                       name="interest_overdue_months"
                       class="form-control form-control-sm policy-form-control"
                       placeholder="Enter overdue months"
                       min="1"
                       step="1"
                       value="{{ old('interest_overdue_months') }}"
                       required>

                @error('interest_overdue_months')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>


            <!-- Interest Overdue Percentage -->
            <div class="col-12 col-md-6">
                <label class="policy-form-label">
                    Interest Overdue Percentage
                    <span class="text-danger">*</span>
                </label>

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

                    <input type="number"
                           name="interest_overdue_percentage"
                           class="form-control policy-form-control"
                           placeholder="Enter overdue percentage"
                           step="0.01"
                           min="0"
                           value="{{ old('interest_overdue_percentage') }}"
                           required>

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

                </div>

                @error('interest_overdue_percentage')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </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>

                @error('description')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </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