@extends('Admin.layout')
<style>
    .image-upload {
        position: relative;
        height: 180px;
        width: 100%;
        border: 2px dashed #000;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #placeholder p {
        margin: 0;
        font-weight: 600;
    }

    #placeholder small {
        color: #555;
    }

    #previewImage {
        max-width: 80%;
        max-height: 140px;
        border-radius: 8px;
        display: none;
    }

    #removeBtn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: none;
        background: #ff4d4d;
        color: #fff;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }
</style>

@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <!-- Heading -->
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{route('package_table')}}"><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 icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>Create Package
        </h5>
    </div>
</div>
<div class="card p-4">
    <h6>Create Package</h6>
    <form action="{{ route('add_package_form') }}" method="post" enctype="multipart/form-data" id="PackageForm">
        @csrf
        <div class="row d-lg-flex-row">
            <div class="col-lg-8 col-md-12 mb-3">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Package</label>
                        <input type="text" name="package" value="{{old('package')}}" class="form-control" placeholder="Enter Package">
                        @error('package')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Amount</label>
                        <input type="text" name="amount" value="{{old('amount')}}" class="form-control" placeholder="Enter Amount"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                        @error('amount')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Discount</label>
                        <input type="text" name="discount" value="{{old('discount')}}" class="form-control" placeholder="Enter Discount"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                        @error('discount')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Days</label>
                        <input type="text" name="days" value="{{old('days')}}" class="form-control" placeholder="Enter Days"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                        @error('days')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Description</label>
                        <input type="text" name="description" value="{{old('description')}}" class="form-control" placeholder="Enter Description">
                        @error('description')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-lg-4 col-md-12 mb-3">
                <label class="form-label">Image</label>

                <div class="image-upload" id="uploadBox">
                    <input type="file" name="package_image" id="fileInput" accept="image/jpeg" hidden>

                    <!-- Remove button -->
                    <button type="button" id="removeBtn">&times;</button>

                    <div id="placeholder">
                        <img src="{{ asset('assets/img') }}/demopackage.png" alt="Demo package">
                        <p>Click to upload image</p>
                        <small>JPG only</small>
                    </div>
                    <input type="hidden" name="package_image" id="package_image"
                        value="{{ old('package_image') }}">

                    <img id="previewImage" alt="Preview">
                </div>
                @error('package_image')
                <small class="text-danger">{{ $message }}</small>
                @enderror
                <p class="mt-1 text-center">( Max file size: 5 MB, JPG only )</p>
            </div>

        </div>


        <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
            <button type="reset" class="btn btn-label-secondary">Discard</button>
            <button type="submit" id="submit_btn" class="btn btn-primary" >Submit</button>

        </div>
    </form>
</div>
</div>
<script>
    //double tap prevention
    document.getElementById('PackageForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>

<script>
    const uploadBox = document.getElementById('uploadBox');
    const fileInput = document.getElementById('fileInput');
    const previewImage = document.getElementById('previewImage');
    const placeholder = document.getElementById('placeholder');
    const removeBtn = document.getElementById('removeBtn');
    const base64Input = document.getElementById('package_image');

    // Open file picker
    uploadBox.addEventListener('click', (e) => {
        if (e.target !== removeBtn) {
            fileInput.click();
        }
    });

    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (!file) return;

        if (file.type !== 'image/jpeg') {
            alert('Only JPG images are allowed.');
            resetUpload();
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            alert('File size must be less than 5 MB.');
            resetUpload();
            return;
        }

        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            previewImage.style.display = 'block';
            placeholder.style.display = 'none';
            removeBtn.style.display = 'flex';
            base64Input.value = e.target.result;

        };
        reader.readAsDataURL(file);
    });
    window.onload = function() {
        if (base64Input.value) {
            previewImage.src = base64Input.value;
            previewImage.style.display = "block";
            placeholder.style.display = "none";
            removeBtn.style.display = "block";
        }
    };

    // Remove image
    removeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        resetUpload();
    });

    function resetUpload() {
        fileInput.value = '';
        previewImage.src = '';
        previewImage.style.display = 'none';
        placeholder.style.display = 'block';
        removeBtn.style.display = 'none';
        base64Input.value = '';

    }
</script>

@endsection