@extends('admin.layout')
<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;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

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

    .form-control {
        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 {
        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 {
        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 input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

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

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

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

    .form-control.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;
    }

    .card {
        background-color: #133d45 !important;
        color: White !important;
    }

    .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;
    }
</style>

@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5 class="mb-0"><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.package_purchase_request') }}">
                    <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>
                        <path d="M15 6l-6 6l6 6"></path>
                    </svg>
                </a>
            </button>Purchase To User</h5>
    </div>

</div>

<!-- Center Card -->
<div class="row justify-content-center">
    <div class="col-lg-8 col-md-9">

        <div class="card shadow-sm border-0 registration-card p-3">
            <div class="card-body p-5">

                <h5 class="mb-4 text-white text-center">Purchase To User</h5>

               <form action="{{ route('admin.add_purchase_to_user') }}" method="POST" enctype="multipart/form-data" id="submitForm">
    @csrf

    <div class="row">

        <!-- Purchased Date -->
        <div class="col-lg-6 mb-3">
            <label class="form-label">Purchased Date <span class="text-danger">*</span></label>
            <input type="date" class="form-control" name="purchased_date"
                value="{{ now()->format('Y-m-d') }}">
        </div>

        <!-- User ID -->
        <div class="col-lg-6 mb-3">
            <label class="form-label">User ID <span class="text-danger">*</span></label>
            <input type="text"
                name="user_id"
                id="user_id"
                class="form-control @error('user_id') is-invalid @enderror"
                value="{{ old('user_id') }}"
                required placeholder="Enter User ID">

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

        <!-- User Name -->
        <div class="col-lg-6 mb-3">
            <label class="form-label">User Name <span class="text-danger">*</span></label>
            <input type="text"
                name="name"
                id="name"
                class="form-control bg-light"
                value="{{ old('name') }}"
                readonly>
        </div>

        <!-- Package -->
        <div class="col-lg-6 mb-3">
            <label class="form-label">Type <span class="text-danger">*</span></label>
            <select class="form-select" name="package_id" required>
                <option value="">Select</option>

                @foreach($packages as $package)
                    <option value="{{ $package->id }}">
                        {{ $package->name }} - ₹{{ number_format($package->price, 2) }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Remark -->
        <div class="col-lg-12 mb-3">
            <label class="form-label">Remark <span class="text-danger">*</span></label>
            <textarea name="remark" class="form-control" placeholder="Enter" rows="3">{{ old('remark') }}</textarea>
        </div>

        <!-- Receipt Upload -->
        <div class="col-lg-12 mb-3">
            <label class="form-label">
                Upload Receipt <span class="text-danger">*</span>
            </label>

            <div class="border border-secondary rounded p-3 text-center position-relative"
                style="border-style:dashed !important; cursor:pointer;">

                <!-- 🔥 Hidden File Input -->
                <input type="file" name="recipt" id="receiptUpload" class="d-none" accept="image/*">

                <!-- Upload UI -->
                <label for="receiptUpload" class="mb-0 w-100" style="cursor:pointer;">
                    <div id="uploadPlaceholder">
                        <i class="ti tabler-upload fs-3"></i>
                        <p class="mb-0 mt-2">Upload</p>
                    </div>
                </label>

                <!-- Preview -->
                <div id="imagePreviewContainer" class="mt-3 d-none position-relative">
                    <img id="imagePreview" class="img-fluid rounded shadow-sm"
                        style="max-height:200px;">
                    <button type="button"
                        class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 rounded-circle"
                        id="removeImage">✕</button>
                </div>

            </div>
        </div>

        <!-- Submit -->
        <div class="d-flex justify-content-center gap-2">
            <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
        </div>

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


    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const userInput = document.getElementById('user_id');
        const nameInput = document.getElementById('name');
        let typingTimer;
        const delay = 500; // wait 0.5 sec after typing
        userInput.addEventListener('keyup', function() {
            clearTimeout(typingTimer);
            const userId = this.value;
            if (userId.length < 3) {
                nameInput.value = '';
                return;
            }
            typingTimer = setTimeout(function() {
                fetch("{{ route('admin.get_user_details') }}?user_id=" + userId)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status) {
                            nameInput.value = data.name;
                        } else {
                            nameInput.value = '';
                        }
                    })
                    .catch(() => {
                        nameInput.value = '';
                    });
            }, delay);
        });
    });
</script>
<script>
    document.getElementById('receiptUpload').addEventListener('change', function (e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('imagePreview').src = e.target.result;
            document.getElementById('imagePreviewContainer').classList.remove('d-none');
        };

        reader.readAsDataURL(file);
    }
});
</script>
<script>
    document.getElementById("submitForm").addEventListener("submit", function() {

        let btn = document.getElementById("submitBtn");

        btn.disabled = true;
        btn.innerText = "Submitting...";

    });
</script>
@endsection