@extends('admin.layout')
<!-- <style>
    .image-upload-box {
    width: 100%;
    height: 200px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    transition: 0.3s;
}

.image-upload-box:hover {
    border-color: #0d6efd;
    background: #eef5ff;
}

.image-upload-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}
</style> -->
<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;
    }

    .image-upload-box {
        border: 2px dashed #f9b198;
        border-radius: 16px;
        height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #fafafa;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .image-upload-box:hover {
        border-color: #696cff;
        background: #f4f5ff;
    }

    .upload-placeholder {
        text-align: center;
        color: #6c757d;
    }

    .upload-placeholder i {
        font-size: 40px;
        margin-bottom: 10px;
        color: #696cff;
    }

    .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }

    .remove-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(255, 0, 0, 0.85);
        color: #fff;
        font-size: 16px;
        line-height: 1;
        z-index: 10;
        transition: 0.2s;
    }

    .remove-btn:hover {
        background: red;
    }

    /* Inputs */
    .custom-input {
        border-radius: 10px;
        padding: 10px 12px;
        border: 1px solid #e0e0e0;
        transition: 0.2s;
    }

    .custom-input:focus {
        border-color: #696cff;
        box-shadow: 0 0 0 2px rgba(105, 108, 255, 0.15);
    }
</style>
@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto d-flex align-items-center">
            <a href="{{ route('admin.purchase_package') }}" 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">Add Package</h4>
        </div>
    </div>
    <div class="container mt-2 p-4">
        <form action="{{ route('admin.add_package') }}" method="POST" enctype="multipart/form-data" id="SubmitForm">
            @csrf



            <div class="row g-4">


                <div class="col-lg-5">
                    <label class="form-label fw-semibold">Product Image</label>

                    <div class="image-upload-box" onclick="triggerImageInput()">
                        <input type="file" name="package_image" id="imageInput" accept="image/*" hidden>


                        <div id="uploadPlaceholder" class="upload-placeholder">
                            <i class="ti tabler-photo"></i>
                            <p>Click or drag image</p>
                            <small class="text-muted">PNG, JPG up to 2MB</small>
                        </div>


                        <img id="previewImage" class="preview-img d-none" />


                        <button type="button" id="removeImageBtn" class="remove-btn d-none" onclick="removeImage(event)">
                            ✕
                        </button>
                    </div>


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


                {{-- <div class="col-lg-7">


                    <div class="mb-3">
                        <label class="form-label fw-semibold">Product Name</label>
                        <input type="text" name="name" value="{{ old('name') }}"
                            class="form-control bliss custom-input @error('name') is-invalid @enderror"
                            placeholder="Enter product name">

                        @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="mb-3">
                        <label class="form-label fw-semibold">Price</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="text" name="price" value="{{ old('price') }}"
                                class="form-control bliss custom-input @error('price') is-invalid @enderror"
                                placeholder="0.00">
                        </div>

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

                    <!-- Description -->
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" rows="4"
                            class="form-control bliss custom-input @error('description') is-invalid @enderror"
                            placeholder="Write product description...">{{ old('description') }}</textarea>

                        @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                </div> --}}
                <div class="col-lg-7">
                    <div class="row">
                        <!-- Product Name -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Product Name</label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                class="form-control bliss custom-input @error('name') is-invalid @enderror"
                                placeholder="Enter product name">

                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Price -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Price</label>
                            <input type="text" name="price" value="{{ old('price') }}"
                                class="form-control bliss custom-input @error('price') is-invalid @enderror"
                                placeholder="0.00">

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

                    <!-- 🔥 GST + Making Charge (Same Row) -->
                    <div class="row">
                        <!-- GST -->
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">GST (%)</label>
                            <input type="text" name="gst" value="{{ old('gst') }}"
                                class="form-control bliss custom-input @error('gst') is-invalid @enderror"
                                placeholder="Enter GST">

                            @error('gst')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Making Charge -->
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">Making Charge</label>
                            <input type="text" name="making_charge" value="{{ old('making_charge') }}"
                                class="form-control bliss custom-input @error('making_charge') is-invalid @enderror"
                                placeholder="Enter Making Charge">

                            @error('making_charge')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">Package Type</label>

                            <select name="package_type"
                                class="form-select bliss custom-input @error('package_type') is-invalid @enderror">

                                <option value="">Select Package Type</option>

                                <option value="additional" {{ old('package_type') == 'additional' ? 'selected' : '' }}>
                                    Additional
                                </option>

                                <option value="activation" {{ old('package_type') == 'activation' ? 'selected' : '' }}>
                                    Activation
                                </option>
                            </select>

                            @error('package_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" rows="3"
                            class="form-control bliss custom-input @error('description') is-invalid @enderror"
                            placeholder="Write product description...">{{ old('description') }}</textarea>

                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="form-action mt-4 d-flex justify-content-center">
                <button type="reset" class="btn btn-label-secondary me-2">Discard</button>
                <button type="submit" class="btn btn-primary" id="submit_btn">Submit</button>
            </div>
        </form>
    </div>
    <script>
        function triggerImageInput() {
            document.getElementById('imageInput').click();
        }

        document.getElementById('imageInput').addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (!file) return;

            const preview = document.getElementById('previewImage');
            const placeholder = document.getElementById('uploadPlaceholder');
            const removeBtn = document.getElementById('removeImageBtn');

            preview.src = URL.createObjectURL(file);
            preview.classList.remove('d-none');
            placeholder.classList.add('d-none');
            removeBtn.classList.remove('d-none');
        });

        function removeImage(event) {
            event.stopPropagation();

            const input = document.getElementById('imageInput');
            const preview = document.getElementById('previewImage');
            const placeholder = document.getElementById('uploadPlaceholder');
            const removeBtn = document.getElementById('removeImageBtn');

            input.value = '';
            preview.src = '';
            preview.classList.add('d-none');
            placeholder.classList.remove('d-none');
            removeBtn.classList.add('d-none');
        }
    </script>

    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('SubmitForm').submit();
        });
    </script>
@endsection