@extends('adminlte::page')

@section('title', 'Banner')

@section('content_header')
<!-- <h1>Product Category</h1> -->
@stop

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Banner</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Banners</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Add Banner</h4>
            </div>
            <form id="add_banner_frm" action="{{route('admin.saveBanner')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <!-- Title and Displaying Page Fields -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title">Title </label>
                                <input type="text" class="form-control title" name="title" id="title" placeholder="Banner Title">
                                {{--@if ($errors->has('title'))
                                <p class="text-danger" style="font-style: italic; font-size: small;">{{ $errors->first('title') }}</p>
                                @endif--}}
                                <p id="titleErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="displaying_page">Displaying Page <span class="text-danger">*</span></label>
                                <select class="form-control page select2" name="page" id="page" data-placeholder="Select displaying page">
                                    <option value="">Select displaying page</option>  
                                    <option value="home">Home</option>
                                    <option value="heritage">Heritage</option>
                                    <option value="club_tour">Club Tour</option>
                                    <option value="about">About</option>
                                    <option value="contact-page">Contact Us</option>
                                    <option value="golf">Golf</option>
                                    <option value="sports">Sports</option>
                                    <option value="privacy_policy">Privacy Policy</option>
                                    <option value="terms_conditions">Terms & Conditions</option>
                                    <option value="food">Food & Beverage</option>
                                    <option value="venue">Venue</option>
                                    <option value="past_president">Past President</option>
                                    <option value="update_profile">Update Profile</option>
                                    <option value="members_directory">Members Directory</option>
                                    <option value="apply_membership_card">Apply for Membership Card</option>
                                    <option value="member_feedback">Member Feedback</option>
                                    <option value="introduction_to_tolly">An Introduction To Tolly</option>
                                    <option value="other_facilities">Other Facilities</option>
                                    <option value="payment_policy">Payment Policy</option>
                                    <option value="payment-page">Make Payment</option>
                                    <option value="payment_guidelines">Payment Guidelines</option>
                                    <option value="timing_facilities">Timing Facilities</option>
                                    <option value="party_conference">Party Conference</option>
                                    <option value="events_calendar">Events Calendar</option>
                                    <option value="accomodation">Accomodation</option>
                                    <option value="affiliations">Affiliations</option>
                                    <option value="letter_from_president">Letter From President</option>
                                    <option value="proshop">Proshop</option>
                                    <option value="committee">Committee</option>
                                    <option value="rules_regulations">Rules & Regulations</option>
                                    <option value="events_at_tolly">Events At Tolly</option>
                                    <option value="career_opportunity">Career Opportunity</option>
                                    <option value="club_tour">Club Tour</option>
                                    <option value="tolly_tatler">Tolly Tatler</option>
                                    <option value="reciprocal_introduction">Reciprocal Introduction</option>
                                    <option value="download">Download</option>
                                    <option value="biodiversity">Biodiversity</option>
                                    <option value="gallery"> Our Gallery</option>
                                    <option value="tender">Tender</option>
                                    <option value="content">Tolly Fest </option>
                                    <option value="payment-history">Payment History </option>
                                    <option value="archive">Archive</option>
                                    <option value="room-booking">Room Booking</option>
                                    
                                </select>
                                {{--@if ($errors->has('displaying_page'))
                                <p class="text-danger" style="font-style: italic; font-size: small;">{{ $errors->first('displaying_page') }}</p>
                                @endif--}}
                                <p id="pageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Description Field -->
                    <div class="form-group">
                        <label for="description">Description </label>
                        <textarea class="form-control description summernote" name="description" id="description" placeholder="Banner Description"></textarea>
                        {{--@if ($errors->has('description'))
                        <p class="text-danger" style="font-style: italic; font-size: small;">{{ $errors->first('description') }}</p>
                        @endif--}}
                        <p id="descriptionErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group" id="videoField" style="display: none;">
                        <label for="banner_video">Banner Video (only for Home)</label>
                        <input type="file" name="banner_video" id="banner_video" class="form-control banner_video"
                            accept="video/mp4,video/avi,video/mpeg,video/quicktime,video/x-matroska"
                            onchange="previewBannerVideo(event)">
                        <small class="form-text text-muted">Allowed: mp4, avi, mov, mkv. Max: 50MB</small>

                        <!-- Video Preview -->
                        <video id="video_preview" width="300" controls style="display:none; margin-top:10px;"></video>
                    </div>
                    <p id="videoErr" class="text-danger" style="font-style: italic; font-size: small;"></p>


                    <!-- Banner Image Field -->
                    <!-- <div class="form-group">
                        <label for="formFile" class="form-label">Banner Image <span class="text-danger">*</span></label>
                        <input class="form-control" type="file" id="formFile" name="banner_image" required onchange="previewImage(event)">
                        @if ($errors->has('banner_image'))
                        <p class="text-danger" style="font-style: italic; font-size: small;">{{ $errors->first('banner_image') }}</p>
                        @endif
                    </div> -->

                    <!-- Image Preview -->
                    <!-- <div class="form-group">
                        <img src="" alt="" id="image_preview" class="img-fluid" style="max-height: 200px; display: none;">
                    </div> -->

                    <!-- Banner Image Fields -->
                    <div id="banner-images-container">
                        <!-- First static image field -->
                        <div class="form-group mb-3">
                            <label class="form-label">Banner Image <span class="text-danger">*</span></label>
                            <div class="d-flex align-items-center">
                                <input class="form-control banner-image-input banner_image" type="file" name="banner_image[]" onchange="previewImage(event, this)">
                            </div>
                            <img src="" alt="" class="img-fluid image-preview mt-2" style="max-height: 100px; display: none;">
                        </div>
                    </div>

                    <p id="imageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                    <!-- Add Image Button -->
                    <button type="button" class="btn btn-sm btn-primary mt-2" onclick="addImageField()">+ Add Image</button>

                </div>

                <!-- Form Footer -->
                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <a href="{{route('admin.showBanner')}}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" id="save_banner" class="btn btn-success"><span>Save</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- /.container-fluid -->

</section>
<!-- /.content -->

<!-- /.content-wrapper -->

<style>
    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }

    .highlighted-product {
        gap: 16px;
    }

    .highlighted-product-column {
        padding: 0px 20px;
        border-radius: 8px;
        border: 1px solid #D9D9D9;
        width: 100%;
        max-width: 497px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 54px;
        height: 27px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #24BC4A;
    }

    input:checked+.slider:before {
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>
@stop

@section('js')
@include('admin.banner.scripts.index')
<!-- <script>
    function previewImage(event) {
        const output = document.getElementById('image_preview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.style.display = 'block';
    }
</script> -->
@stop