@extends('Admin.layout')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{route('admin.banner')}}">
                    <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>
            </button>
            Add banner
        </h5>
    </div>
</div>

<div class="row justify-content-center mb-5">
    <div class="col-md-6">
        <form action="{{route('admin.banner')}}">
            <div class="card shadow">
                <div class="card-body">
                    <h5 class="mb-4">Upload Banner</h5>

                    <!-- User Type -->
                    <div class="mb-3">
                        <label class="form-label">User Type</label>
                        <select class="form-select">
                            <option>Select</option>
                            <option>Restaurant</option>
                            <option>User</option>
                        </select>
                    </div>

                    <!-- Upload Box -->
                    <div class="border border-secondary border-dashed rounded p-5 text-center bg-primary-subtle">

                        <div id="uploadArea" class="cursor-pointer" onclick="document.getElementById('banner').click()">
                            <i class="ti tabler-upload fs-1 text-dark"></i>
                            <h4 class="mt-3">Upload Banner</h4>
                            <p class="text-dark">2 MB Jpg, Png, JPEG</p>

                        </div>

                        <img id="preview" src="" class="img-fluid rounded d-none cursor-pointer w-100" style="max-height:200px;" data-bs-toggle="modal" data-bs-target="#imageModal">

                        <!-- <div id="changeImageArea" class="d-none mt-3">
                            <button type="button"
                                class="btn btn-outline-primary"
                                onclick="document.getElementById('banner').click()">
                                <i class="ti tabler-refresh me-1"></i>
                                Change Image
                            </button>
                        </div> -->


                        <input type="file" id="banner" class="d-none" accept=".jpg,.jpeg,.png" onchange="previewImage(event)">

                    </div>

                    <button class="btn btn-primary text-white w-100 mt-4">Submit</button>

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


<script>
    function previewImage(event) {
        const file = event.target.files[0];
        if (!file) return;
        const url = URL.createObjectURL(file);
        document.getElementById("preview").src = url;

        document.getElementById("uploadArea").classList.add("d-none");
        document.getElementById("preview").classList.remove("d-none");
        // document.getElementById("changeImageArea").classList.remove("d-none");
    }
</script>

@endsection