@extends('layouts.back-end.body')
@section('content')
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-sliders" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
                        </svg> <span class="sub-navicate">{{ __('message.slide') }}<svg xmlns="http://www.w3.org/2000/svg"
                                width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right"
                                viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />
                                <path fill-rule="evenodd"
                                    d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg>
                            @if (empty($slide))
                                {{ __('message.new') }}
                            @else
                                {{ __('message.edit') }}
                            @endif
                    </h1></span>
                </div>
            </div>
        </div>

        @if (empty($slide))
            <form class="form-horizontal" method="POST" action="{{ route('slides.store') }}" enctype="multipart/form-data">
                @csrf
                @if (isset($slide))
                    <input name="_method" type="hidden" value="PUT">
                @endif
                <div class="app-card app-card-notification shadow-sm mb-4">
                    <div class="app-card-body p-4 input-p-4">
                        <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding">

                            <div class="col-lg-6 col-md-6 col-sm-12 tab-language">
                                <label>{{ __('message.order') }}</label>
                                <input type="text" class="form-control require-input" name="order"
                                    placeholder="{{ __('message.please input') }}" onkeypress="return numberOnly(event)"
                                    required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <label>{{ __('message.select type') }} <span class="red">*</span></label>
                                <select name="slide_type" class="form-control require-input" required>
                                    {{-- <option> {{ __('message.select type') }}</option> --}}
                                    <option value="1"> Slide 1</option>
                                    <option value="2"> Slide 2</option>
                                    @error('slide_type')
                                        <div class="form-error text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </select>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 tab-language">
                                <label>{{ __('message.feature image') }}<span class="red">*</span></label>
                                <div class="col">
                                    <label class="border border-info image-upload-wrap" style="cursor: pointer;">
                                        <input type="file" size="50" style="display: none" name="feature_image"
                                            id="formFile" onchange="preview()">
                                        <img src="{{ !empty($slide->feature_image) ? asset($slide->feature_image) : asset('storage/no_image.png') }}"
                                            id="frame" style="width:200px;" style="cursor: pointer;" alt="">
                                    </label>
                                    @error('feature_image')
                                        <div class="form-error text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-save-change">
                    <button type="submit" class="btn app-btn-primary float-right"
                        onclick="this.form.submit();this.disabled = true;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-shield-check" viewBox="0 0 16 16">
                            <path
                                d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
                            <path
                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                        </svg>
                        {{ __('message.save change') }}
                    </button>

                    <button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-arrow-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                        </svg> {{ __('message.go back') }}</button>

                </div>
            </form>
        @else
            <form class="form-horizontal" id="form-bank" method="POST" action="{{ route('slides.update', $slide->id) }}"
                enctype="multipart/form-data">
                <input name="_method" type="hidden" value="PUT">
                @csrf
                <div class="app-card app-card-notification shadow-sm mb-4">
                    <div class="app-card-body p-4 input-p-4">
                        <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding">

                            <div class="col-lg-6 col-md-6 col-sm-12 tab-language">
                                <label>{{ __('message.order') }}</label>
                                <input type="text" class="form-control require-input" name="order"
                                    value="{{ isset($slide['order']) ? $slide['order'] : '' }}"
                                    placeholder="{{ __('message.please input') }}" onkeypress="return numberOnly(event)"
                                    required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <label>{{ __('message.select type') }} <span class="red">*</span></label>
                                <select name="slide_type" class="form-control require-input" required="">
                                    {{-- <option> {{ __('message.select type') }}</option> --}}
                                    <option value="1" @if ($slide->slide_type == 1) selected @endif> Slide 1
                                    </option>
                                    <option value="2" @if ($slide->slide_type == 2) selected @endif> Slide 2
                                    </option>
                                    @error('slide_type')
                                        <div class="form-error text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </select>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 tab-language">
                                <label>{{ __('message.feature image') }}<span class="red">*</span></label>
                                <div class="col">
                                    <label class="border border-info" style="cursor: pointer;">
                                        <input type="file" size="50" style="display: none" name="feature_image"
                                            id="formFile" onchange="preview()">
                                        <img src="{{ !empty($slide->feature_image) ? asset($slide->feature_image) : asset('storage/no_image.png') }}"
                                            id="frame" style="width:200px;" style="cursor: pointer;" alt="">
                                    </label>
                                    @error('feature_image')
                                        <div class="form-error text-danger">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                        </div>
                        {{-- <div class="col-lg-12 col-md-12 col-sm-12 input-next">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active"
                                    value="{{ isset($slide['is_active']) ? $slide['is_active'] : '1' }}"
                                    id="flexCheckApprove" @if (isset($slide['is_active']) && $slide['is_active']) checked @endif>
                                <label class="form-check-label" for="flexCheckApprove">
                                    {{ __('message.active') }}
                                </label>
                            </div>
                        </div> --}}
                    </div>
                </div>
    </div>
    <div class="btn-save-change">
        <button type="submit" class="btn app-btn-primary float-right"
            onclick="this.form.submit();this.disabled = true;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                class="bi bi-shield-check" viewBox="0 0 16 16">
                <path
                    d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
                <path
                    d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
            </svg>
            {{ __('message.save change') }}
        </button>

        <button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg
                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                class="bi bi-arrow-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
            </svg> {{ __('message.go back') }}</button>

    </div>
    </form>
    @endif
    </div>
    </div>
    <style type=text/css>
        .txt-card {
            padding-top: 0rem;
        }

        .select-div {
            padding: 0px;
        }

        .btn-card {
            padding-top: 1.5rem;
            text-align: center;
        }

        .pointer {
            cursor: pointer;
        }

        .select2-container .select2-selection--single {
            height: 40px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 40px !important;
        }

        .select2-hidden-accessible {
            position: initial !important;
        }

        input.require-input-readonly {
            text-align: center;
        }

        @media (max-width: 575.98px) {
            .btn-card {
                padding-top: 0rem;
                text-align: right;
            }

            .txt-card {
                padding-top: 1.5rem;
            }
        }

        @media (max-width: 767.98px) {
            .btn-card {
                padding-top: 0rem;
                text-align: right;
            }

            .txt-card {
                padding-top: 1.5rem;
            }
        }
    </style>
    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        // Number only
        function numberOnly(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 &&
                (charCode < 48 || charCode > 57))
                return false;

            return true;
        }
        // Number only
        // redirect back
        function redirect_back() {
            location.href = '{{ url('/admin/slides') }}';
        }
        // redirect back

        // <!-- Preview image upload script -->
        function preview() {
            frame.src = URL.createObjectURL(event.target.files[0]);
        }

        function clearImage() {
            document.getElementById("formFile").value = null;
            frame.src = "";
        }

        function previewfav() {
            framefav.src = URL.createObjectURL(event.target.files[0]);
        }

        function previewShopLogo() {
            shopLogo.src = URL.createObjectURL(event.target.files[0]);
        }

        function clearImagefav() {
            document.getElementById("formFilefav").value = null;
            framefav.src = "";
        }
    </script>

@endsection