@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')

        <div class="row">
            <style>
                /* Remove the spinner from number input */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield; /* Firefox */
    }

            </style>
            <div class="col-12">
                <div class="card">

                    <div class="card-body">
                        @include('elements.alert-error')


                        <form
                            action="{{ isset($sliderDetail) ? route('admin.slider-details.update', $sliderDetail->id) : route('admin.slider-details.store') }}"
                            id="slider_detail_form" method="POST" class="form-horizontal" enctype="multipart/form-data"
                            novalidate="novalidate">
                            @csrf
                            @if (isset($sliderDetail))
                                @method('PUT')
                            @endif

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="title">Title <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title"
                                        placeholder="Enter Title"
                                        value="{{ old('title', $sliderDetail ? $sliderDetail->title : '') }}">
                                    <span class="invalid-feedback"></span>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="sub_title">Sub Title <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="sub_title" name="sub_title"
                                        placeholder="Enter Sub Title"
                                        value="{{ old('sub_title', $sliderDetail ? $sliderDetail->sub_title : '') }}">
                                    <span class="invalid-feedback"></span>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="sort_order">Sort Order</label>
                                    <input type="number" class="form-control" id="sort_order" name="sort_order"
                                        placeholder="Enter Sort Order"
                                        value="{{ old('sort_order', $sliderDetail ? $sliderDetail->sort_order : '') }}">
                                    <span class="invalid-feedback"></span>
                                </div>


                            </div>



                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="button_text">Button Text <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="button_text" name="button_text"
                                        placeholder="Enter Button Text"
                                        value="{{ old('button_text', $sliderDetail ? $sliderDetail->button_text : '') }}">
                                    <span class="invalid-feedback"></span>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="button_type">Button Type <span
                                            class="text-danger">*</span></label>
                                    <select class="form-select" id="button_type" name="button_type">
                                        <option value="">Select Button Type</option>
                                        <option value="link"
                                            {{ old('button_type', $sliderDetail ? $sliderDetail->button_type : '') == 'link' ? 'selected' : '' }}>
                                            Link</option>
                                        <option value="popup_model"
                                            {{ old('button_type', $sliderDetail ? $sliderDetail->button_type : '') == 'popup_model' ? 'selected' : '' }}>
                                            Popup Model</option>
                                    </select>
                                    <span class="invalid-feedback"></span>
                                </div>

                                <div class="col-md-4" id="button_link_field" style="display: none;">
                                    <label class="form-label" for="button_link">Button Link <span
                                            class="text-danger">*</span></label>
                                    <input type="url" class="form-control" id="button_link" name="button_link"
                                        placeholder="Enter Button Link"
                                        value="{{ old('button_link', $sliderDetail ? $sliderDetail->button_link : '') }}">
                                    <span class="invalid-feedback"></span>
                                </div>


                                <div class="col-md-3">
                                    <label class="col-3 col-form-label" for="status">Status</label>
                                    <div class="form-check form-switch">
                                        <input type="checkbox" class="form-check-input" id="customSwitch1" name="status"
                                            value="1"
                                            {{ old('status', $sliderDetail ? $sliderDetail->status : 1) == 1 ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="">Slider Image:(Image Dimensions: 1920 x 694) <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" id="image" name="image" accept="image/*">
                                    <small class="form-text text-muted">Maximum file size: 300 KB</small>
                                    <span class="invalid-feedback"></span>
                                </div>
                                @if (isset($sliderDetail) && $sliderDetail->image)
                                <div class="col-md-2">

                                        <div class="mt-2">
                                            <img src="{{ asset('storage/sliders/' . $sliderDetail->image) }}" alt="Slider Image" class="img-thumbnail" style="width: 150px; height: auto;">
                                        </div>

                                </div>
                                @endif


                                <div class="col-md-4">
                                    <label class="form-label" for="">Slider Image For Mobile: <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" id="mobile_image" name="mobile_image" accept="image/*">
                                    <small class="form-text text-muted">Maximum file size: 300 KB</small>
                                    <span class="invalid-feedback"></span>
                                </div>
                                @if (isset($sliderDetail) && $sliderDetail->mobile_image)
                                <div class="col-md-2">

                                        <div class="mt-2">
                                            <img src="{{ asset('storage/sliders/' . $sliderDetail->mobile_image) }}" alt="Slider Image" class="img-thumbnail" style="width: 150px; height: auto;">
                                        </div>

                                </div>
                                @endif
                            </div>




                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit">
                                    {{ $sliderDetail ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.slider-details.index') }}"
                                    class="btn btn-outline-danger">Cancel</a>
                            </div>
                        </form>


                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->


        </div>
        <!-- end row -->
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Show or hide button link field
            function toggleButtonLinkField() {
                if ($('#button_type').val() === 'link') {
                    $('#button_link_field').show();
                } else {
                    $('#button_link_field').hide();
                }
            }

            // Initial check
            toggleButtonLinkField();

            // On change event
            $('#button_type').change(function() {
                toggleButtonLinkField();
            });

            // Form validation
            $("#slider_detail_form").validate({
                rules: {
                    title: {
                        required: true,
                        maxlength: 255
                    },
                    sub_title: {
                        required: true,
                        maxlength: 255
                    },
                    button_type: {
                        required: true
                    },
                    button_link: {
                        required: function() {
                            return $('#button_type').val() === 'link';
                        },
                        url: true
                    },
                    button_text: {
                        required: true,
                        maxlength: 255
                    }
                },
                messages: {
                    title: {
                        required: "Please enter a title",
                        maxlength: "Title cannot exceed 255 characters"
                    },
                    sub_title: {
                        required: "Please enter a sub title",
                        maxlength: "Sub Title cannot exceed 255 characters"
                    },
                    button_type: {
                        required: "Please select a button type"
                    },
                    button_link: {
                        required: "Please enter a button link",
                        url: "Please enter a valid URL"
                    },
                    button_text: {
                        required: "Please enter button text",
                        maxlength: "Text cannot exceed 255 characters"
                    }
                },
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');
                    error.insertAfter(element);
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>
@endsection