@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('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('add_banner_store') }}" method="POST" enctype="multipart/form-data" id="bannerForm">

                @csrf
                <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 @error('user_type') is-invalid @enderror" name="user_type">

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

                                <option value="Restaurant" {{ old('user_type') == 'Restaurant' ? 'selected' : '' }}>
                                    Restaurant
                                </option>

                                <option value="User" {{ old('user_type') == 'User' ? 'selected' : '' }}>
                                    User
                                </option>

                            </select>

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

                        </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">

                            <input type="file" id="banner" name="banner"
                                class="d-none @error('banner') is-invalid @enderror" accept=".jpg,.jpeg,.png"
                                onchange="previewImage(event)">

                        </div>

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

                        <button class="btn btn-primary text-white w-100 mt-4" id="submitBtn">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>
    <script>
        document.getElementById('submitBtn').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('bannerForm').submit();
        });
    </script>

@endsection