@extends('website.layout.app')
@section('title', __('Book Your Slot'))
@push('styles')
<style>
.image-upload-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
}

.image-upload-wrapper input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 2;
}

.image-preview {
    width: 100%;
    height: 100%;
    border: 2px dashed #ddd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background-color: #fafafa;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

.image-preview .plus-icon {
    font-size: 48px;
    color: #aaa;
    position: absolute;
}

#signature-pad{
    border: 2px dashed #ddd;
    border-radius: 12px;
        background-color: #fafafa;

}

</style>
@endpush
@section('content')
<section id="contact-section" class="contact-section sec-ptb-100 clearfix">
    <div class="container pt-5">

        <!-- section-title -->
        <div class="section-title mb-50">
            <small class="sub-title">Book Your Slot</small>
            <h2 class="big-title">For <strong>{{ $event->name }}</strong></h2>
        </div>

        <!-- slot booking form -->
        <div class="contact-form form-wrapper text-center">
            <div class="row">
                <div class="col-12">
                    @if(session('status'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('status') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
            <form action="{{ route('slot_booking_store',$event->id) }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="company_name" placeholder="Company Name *" value="{{ old('company_name') }}" required>
                            @error('company_name') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="ntn_number" placeholder="NTN Number *" value="{{ old('ntn_number') }}" required>
                            @error('ntn_number') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="sntn" placeholder="SNTN" value="{{ old('sntn') }}">
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="address" placeholder="Address *" value="{{ old('address') }}" required>
                            @error('address') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="email" name="company_email" placeholder="Company Email *" value="{{ old('company_email') }}" required>
                            @error('company_email') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="tel" name="company_phone" placeholder="Company Phone / Mobile Number *" value="{{ old('company_phone') }}" required>
                            @error('company_phone') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="contact_person_name" placeholder="Contact Person Name *" value="{{ old('contact_person_name') }}" required>
                            @error('contact_person_name') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="contact_person_designation" placeholder="Contact Person Designation" value="{{ old('contact_person_designation') }}">
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="tel" name="contact_person_mobile" placeholder="Contact Person Mobile Number *" value="{{ old('contact_person_mobile') }}" required>
                            @error('contact_person_mobile') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="head_of_organization" placeholder="Head of Organization" value="{{ old('head_of_organization') }}">
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="head_of_organization_designation" placeholder="Head of Organization Designation" value="{{ old('head_of_organization_designation') }}">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="size" placeholder="Size" value="{{ old('size') }}">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-item">
                            <input type="text" name="participation_type" placeholder="Participation Type*" value="{{ old('participation_type') }}">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-item">
                            <textarea name="product_to_exhibit" placeholder="Product to be Exhibited *" required>{{ old('product_to_exhibit') }}</textarea>
                            @error('product_to_exhibit') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-item">
                            <textarea name="description" placeholder="Description of Stall / Space / Sponsorship *" required>{{ old('description') }}</textarea>
                            @error('description') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="form-item">
                            <label>Logo</label>

                            <div class="image-upload-wrapper mx-auto">
                                <input type="file" name="logo" id="logoInput" accept="image/*">
                                <div id="logoPreviewWrapper" class="image-preview">
                                    <span class="plus-icon">+</span>
                                    <img id="logoPreview" src="#" alt="Logo Preview">
                                </div>
                            </div>

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


                    <div class="col-lg-8 col-md-6 col-sm-12">
                        <div class="form-item">
                            <label>Signature</label>
                            <!-- Responsive Canvas -->
                            <canvas id="signature-pad" class="w-100" style="height: 150px;"></canvas>
                            <input type="hidden" name="signature" id="signature-input">
                            <div class="mt-2 d-flex justify-content-end">
                                <button type="button" id="clear-signature" class="btn btn-secondary btn-sm">Clear</button>
                            </div>
                            @error('signature')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 mt-3">
                        <button type="submit" class="custom-btn">Submit Booking</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    document.getElementById('logoInput').addEventListener('change', function(event) {
        const [file] = event.target.files;
        const preview = document.getElementById('logoPreview');
        const wrapper = document.getElementById('logoPreviewWrapper');
        const plusIcon = wrapper.querySelector('.plus-icon');

        if (file) {
            preview.src = URL.createObjectURL(file);
            preview.style.display = 'block';
            plusIcon.style.display = 'none';
        } else {
            preview.src = '#';
            preview.style.display = 'none';
            plusIcon.style.display = 'block';
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    const canvas = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(255, 255, 255)'
    });

    function resizeCanvas() {
        const ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear();
    }

    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();

    document.getElementById('clear-signature').addEventListener('click', () => {
        signaturePad.clear();
    });

    const form = canvas.closest('form');
    form.addEventListener('submit', function(e) {
        if (!signaturePad.isEmpty()) {
            document.getElementById('signature-input').value = signaturePad.toDataURL('image/png');
        }
    });
</script>

@endpush