@extends('admin.layout')

@section('content')
<style>
    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #133d45;
        --free: #ffd700;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }

    .container {
        border-radius: 0.6em;
        padding: 20px;
        background-color: #133d45 !important;

    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control.bliss {
        margin-bottom: 10px;
        /* padding-bottom: 20px; */
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control.bliss,
    .select2-container--default .select2-selection--single {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select.bliss {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    input::placeholder,
    textarea::placeholder {
        color: #a8a6a6 !important;
        opacity: 0.7;
    }

    .form-control.bliss input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.bliss.success input {
        border-color: var(--success-color);
    }

    .form-control.bliss.error input {
        border-color: var(--error-color);
    }

    .form-control.bliss small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.bliss.error small {
        visibility: visible;
    }

    .btn-submit {
        cursor: pointer;
        background: #ffd700 !important;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }


    .form-label {
        color: White !important;
    }

    .news-marquee {
        width: 100%;
        overflow: hidden;
        background: #111;
        color: #fff;
        padding: 10px 0;
        position: relative;
        border-radius: 6px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }

    /* Styling to match the image precisely */
    .level-card {
        border-radius: 8px;
        padding: 25px;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 5px;
        display: block;
    }

    /* .level-input {
                background-color: #fcfcfc !important;
                bord4er: 1px solid #ddd !important;
                color: #ccc !important;
            } */

    /* .level-input::placeholder {
                color: #ccc;
            } */
</style>

<div class="container-fluid">
    <div class="row align-items-center justify-content-between mb-4 mt-3">
        <div class="col-auto d-flex align-items-center">
            <a href="{{ route('admin.level_master_history') }}" class="btn btn-white btn-icon me-3 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
            <h4 class="mb-0">Level Master</h4>
        </div>
        <!-- <div class="col-auto">
                    <a href="{{ route('admin.level_master') }}" class="btn btn-info text-white px-4">
                        Create level
                    </a>
                </div> -->
    </div>

    <div class="p-3 container shadow-sm">
        <div class="section-title mt-1">
            <span><i class="ti tabler-crown icon-base me-1"></i>Level Master</span>
        </div>

        <form action="{{ route('admin.add_level') }}" method="POST" id="purchaseForm">
            @csrf

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Package</label>

                    <!-- Display -->
                    <input type="text" class="form-control" value="OG22" readonly>

                    <!-- Hidden value for backend -->
                    <input type="hidden" name="package" value="omiga_22">
                </div>

                @for ($i = 1; $i <= 3; $i++)
                    <div class="col-md-3">
                    <label class="form-label">Level-{{ $i }}</label>
                    <input type="text" class="form-control bliss level-input" name="level_{{ $i }}"
                        value="{{ old('level_' . $i) }}" placeholder="0%">
                    @error('level_' . $i)
                    <div class="text-danger small">{{ $message }}</div>
                    @enderror
            </div>
            @endfor

            @for ($i = 4; $i <= 7; $i++)
                <div class="col-md-3">
                <label class="form-label">Level-{{ $i }}</label>

                <input type="text" class="form-control bliss level-input" name="level_{{ $i }}"
                    value="{{ old('level_' . $i) }}" placeholder="0%">

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

    <div class="col-md-4">
        <label class="form-label">Level-8</label>
        <input type="text" class="form-control bliss level-input" name="level_8"
            value="{{ old('level_8') }}" placeholder="0%">
        @error('level_8')
        <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">Level-9</label>
        <input type="text" class="form-control bliss level-input" name="level_9"
            value="{{ old('level_9') }}" placeholder="0%">
        @error('level_9')
        <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">Level-10</label>
        <input type="text" class="form-control bliss level-input" name="level_10"
            value="{{ old('level_10') }}" placeholder="0%">
        @error('level_10')
        <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Level-11</label>
        <input type="text" class="form-control bliss level-input" name="level_11"
            value="{{ old('level_11') }}" placeholder="0%">
        @error('level_11')
        <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Level-12</label>
        <input type="text" class="form-control bliss level-input" name="level_12"
            value="{{ old('level_12') }}" placeholder="0%">
        @error('level_12')
        <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

</div>

<div class="d-flex justify-content-center gap-3 mt-5">
    <button type="reset" class="btn btn-label-secondary px-5 py-2 border" style="background: #e9ecef;">
        Discard
    </button>

    <!-- KEEP YOUR MODAL TRIGGER (Design Same) -->
    <button type="button" data-bs-toggle="modal" data-bs-target="#openConfirmModal"
        class="btn btn-submit px-5 py-2">
        Submit
    </button>
</div>
</form>
</div>
</div>

<div class="modal fade" id="openConfirmModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4">
            <h4 class="fw-bold mb-3">Are you Sure !!</h4>
            <p class="text-muted">Are you Confirm to Submit ?</p>
            <div class="d-flex justify-content-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-info px-4 w-100" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirmSubmit" class="btn btn-primary px-4 w-100">Yes, Sure</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const form = document.getElementById('purchaseForm');
        const confirmBtn = document.getElementById('confirmSubmit');

        confirmBtn.addEventListener('click', function() {

            confirmBtn.disabled = true;
            confirmBtn.innerText = "Processing...";

            form.submit();
        });
    });
</script>
@endsection