@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">Edit Banner</h4>
            </div>
            <form id="edit_banner_frm" action="{{route('admin.updateBanner')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <input type="hidden" name="hid" value="{{$banner['id']}}">
                    <!-- 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" value="{{$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" @if($banner['page']=='home') selected @endif>Home</option>
                                    <option value="heritage" @if($banner['page']=='heritage') selected @endif>Heritage</option>
                                    <option value="club_tour" @if($banner['page']=='club_tour') selected @endif>Club Tour</option>
                                    <option value="about" @if($banner['page']=='about') selected @endif>About</option>
                                    <option value="contact-page" @if($banner['page']=='contact-page') selected @endif>Contact Us</option>
                                    <option value="golf" @if($banner['page']=='golf') selected @endif>Golf</option>
                                    <option value="sports" @if($banner['page']=='sports') selected @endif>Sports</option>
                                    <option value="privacy_policy" @if($banner['page']=='privacy_policy') selected @endif>Privacy Policy</option>
                                    <option value="terms_conditions" @if($banner['page']=='terms_conditions') selected @endif>Terms & Conditions</option>
                                    <option value="food" @if($banner['page']=='food') selected @endif>Food & Beverage</option>
                                    <option value="venue" @if($banner['page']=='venue') selected @endif>Venue</option>
                                    <option value="past_president" @if($banner['page']=='past_president') selected @endif>Past President</option>
                                    <option value="update_profile" @if($banner['page']=='update_profile') selected @endif>Update Profile</option>
                                    <option value="members_directory" @if($banner['page']=='members_directory') selected @endif>Members Directory</option>
                                    <option value="apply_membership_card" @if($banner['page']=='apply_membership_card') selected @endif>Apply for Membership Card</option>
                                    <option value="member_feedback" @if($banner['page']=='member_feedback') selected @endif>Member Feedback</option>
                                    <option value="introduction_to_tolly" @if($banner['page']=='introduction_to_tolly') selected @endif>An Introduction To Tolly</option>
                                    <option value="other_facilities" @if($banner['page']=='other_facilities') selected @endif>Other Facilities</option>
                                    <option value="payment_policy" @if($banner['page']=='payment_policy') selected @endif>Payment Policy</option>
                                    <option value="payment-page" @if($banner['page']=='payment-page') selected @endif>Make Payment</option>
                                    <option value="payment_guidelines" @if($banner['page']=='payment_guidelines') selected @endif>Payment Guidelines</option>
                                    <option value="timing_facilities"@if($banner['page']=='timing_facilities') selected @endif>Timing Facilities</option>
                                    <option value="party_conference"@if($banner['page']=='party_conference') selected @endif>Party Conference</option>
                                    <option value="events_calendar" @if($banner['page']=='events_calendar') selected @endif>Events Calendar</option>
                                    <option value="accomodation" @if($banner['page']=='accomodation') selected @endif>Accomodation</option>
                                    <option value="affiliations" @if($banner['page']=='affiliations') selected @endif>Affiliations</option>
                                    <option value="letter_from_president" @if($banner['page']=='letter_from_president') selected @endif>Letter From President</option>
                                    <option value="proshop" @if($banner['page']=='proshop') selected @endif>Proshop</option>
                                    <option value="committee" @if($banner['page']=='committee') selected @endif>Committee</option>
                                    <option value="rules_regulations" @if($banner['page']=='rules_regulations') selected @endif>Rules & Regulations</option>
                                    <option value="events_at_tolly"  @if($banner['page']=='events_at_tolly') selected @endif>Events At Tolly</option>
                                    <option value="career_opportunity" @if($banner['page']=='career_opportunity') selected @endif>Career Opportunity</option>
                                    <option value="club_tour" @if($banner['page']=='club_tour') selected @endif>Club Tour</option>
                                    <option value="tolly_tatler" @if($banner['page']=='tolly_tatler') selected @endif>Tolly Tatler</option>
                                    <option value="reciprocal_introduction" @if($banner['page']=='reciprocal_introduction') selected @endif>Reciprocal Introduction</option>
                                    <option value="download" @if($banner['page']=='download') selected @endif>Download</option>
                                    <option value="biodiversity" @if($banner['page']=='biodiversity') selected @endif>Biodiversity</option>
                                    <option value="gallery" @if($banner['page']=='gallery') selected @endif>Our Gallery</option>
                                    <option value="tender" @if($banner['page']=='tender') selected @endif>Tender</option>
                                    <option value="content" @if($banner['page']=='content') selected @endif>Tolly Fest </option>
                                    <option value="payment-history" @if($banner['page']=='payment-history') selected @endif>Payment History </option>
                                    <option value="archive" @if($banner['page']=='archive') selected @endif>Archive </option>
                                    <option value="room-booking" @if($banner['page']=='room-booking') selected @endif>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">{{$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: {{ $banner['page'] === 'home' ? 'block' : '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">Upload new video to replace existing one. Max: 50MB</small>

                        <div class="mb-2 d-flex gap-2">
                            @if($banner['video'])
                                <video id="existing_video_preview" width="300" controls style="display: {{ $banner['page'] === 'home' ? 'block' : 'none' }};">
                                    <source src="{{ asset('storage/distribution/videos/banners/' . $banner['video']) }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            @endif

                            <video id="video_preview" width="300" controls style="display:none; margin-top:10px;"></video>
                        </div>
                    </div>

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

                    <!-- Hidden input for images marked for deletion -->
                    <input type="hidden" name="delete_images" id="delete_images">

                    <!-- Banner Image Fields (Edit Mode) -->
                    <div id="banner-images-container">
                        <label class="form-label">Banner Image <span class="text-danger">*</span></label>
                        @foreach($banner['banner_images'] as $image)
                            <div class="form-group mb-3" data-image-id="{{ $image['id'] }}">
                                <div class="d-flex align-items-center">
                                    <input class="form-control banner-image-input" 
                                        type="file" 
                                        name="banner_image_existing[{{ $image['id'] }}]" 
                                        onchange="previewNewImage(event, this)">
                                    <button type="button" class="btn btn-danger btn-sm ms-2" onclick="removeExistingImage(this, {{ $image['id'] }})">Delete</button>
                                </div>

                                <!-- Existing preview -->
                                <div class="mt-2 d-flex gap-2">
                                    <img src="{{ asset('storage/distribution/images/banner_image/' . $image['image']) }}" 
                                        alt="Existing Image" 
                                        class="img-fluid existing-preview" 
                                        style="max-height: 100px;">

                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <!-- New preview (hidden until file chosen) -->
                                    <img src="" alt="New Preview" class="img-fluid new-preview" style="max-height: 100px; display: none;">
                                </div>
                            </div>
                        @endforeach
                    </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_product" class="btn btn-success"><span>Update</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