@extends('adminlte::page')

@section('title', 'Booking Rules')
<style>
    .updateBtn {
    position: fixed;
    bottom: 40px;
    right: 60px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
</style>
@section('content_header')
@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>Booking Rules</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">CMS Settings</li>
                    <li class="breadcrumb-item">Party & Conference</li>
                    <li class="breadcrumb-item active">Booking Rules</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/Edit Booking Rule</h4>
            </div>
            <form id="edit_booking_rule_frm" action="{{ route('admin.updateBookingRules') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <!-- Booking Rules Title -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control title" name="title" id="title_edit" value="@if(!empty($booking_rules)){{ $booking_rules->title }} @endif">
                                    
                                <p id="titleEditErr" class="text-danger titleErr" style="font-style: italic; font-size: small;"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Booking Rules Description -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description <span class="text-danger">*</span></label>
                                <textarea class="form-control summernote description" name="description" id="description_edit">
                                    @if(!empty($booking_rules)){!! $booking_rules->description !!} @endif
                                </textarea>
                                <p id="descriptionEditErr" class="text-danger descriptionErr" style="font-style: italic; font-size: small;"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Image -->
                    <div class="row">
                        <div class="col-md-12">
                            <label>Image <span class="text-danger">*</span></label>
                            <input type="file" class="image" name="image" id="image_edit" onchange="previewImageEdit(event)">
                            <div class="mt-2 d-flex gap-2">
                                @if(!empty($booking_rules))
                                <img src="{{ asset('storage/distribution/images/booking_rules/' . $booking_rules->image) }}" 
                                    alt="Existing" class="img-fluid" style="max-height: 100px;">
                                @endif
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <img src="" id="image_preview_edit" class="img-fluid new-preview" style="max-height: 100px; display:none;">
                            </div>
                            <p id="imageEditErr" class="text-danger imageErr" style="font-style: italic; font-size: small;"></p>
                        </div>
                    </div>

                    
                </div>

                <!-- Form Footer -->
                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('admin.showBookingRules') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" id="save_booking_rule" class="btn btn-success updateBtn"><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;
    }
     .note-editor .note-editing-area .note-editable {
        min-height: 300px;
    }

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

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