@section('title', translate('banner_Setup'))

@extends('layouts.admin.app')

@push('css_or_js')
@endpush

@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <h1 class="page-header-title">
                <span class="page-header-icon">
                    <img src="{{ asset('public/assets/admin/img/banner.png') }}" class="w--26" alt="">
                </span>
                <span>{{ translate('edit_banner') }}</span>
            </h1>
        </div>

        <div class="row gx-2 gx-lg-3">
            <div class="col-sm-12 col-lg-12 mb-3 mb-lg-2">
                <div class="card">
                    <div class="card-header">
                        <div>
                            <h5 class="text-title mb-1">{{ translate('edit_banner') }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.promotion.banner-setup.update', ['id' => $banner->id]) }}"
                              id="banner_form" enctype="multipart/form-data" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="row g-3">
                                <div class="col-lg-6">
                                    <div class="__bg-FAFAFA p-4 radius-10 mb-4">
                                        <div class="form-group mb-0">
                                            <label class="input-label" for="banner_title">
                                                {{ translate('banner_title') }} <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" class="form-control" id="banner_title" name="banner_title"
                                                   value="{{ $banner->name }}" placeholder="Ex: 50% Off" required>
                                        </div>
                                        <div class="form-group mb-0 mt-3">
                                            <label class="input-label" for="sort_description">
                                                {{ translate('short_description') }} <span class="text-danger">*</span>
                                            </label>
                                            <div class="character-count">
                                                <textarea name="short_desc" id="sort_description" placeholder="Type Here..."
                                                          class="form-control character-count-field" cols="30"
                                                          rows="6" maxlength="800" data-max-character="800"
                                                          required>{{ $banner->description }}</textarea>
                                                <span>{{ translate('0/800') }}</span>
                                            </div>
                                        </div>
                                        <div class="form-group mb-0 mt-3">
                                            <label class="input-label" for="redirect_link">
                                                {{ translate('redirect_link') }} <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" class="form-control" id="redirect_link" name="redirect_link"
                                                   value="{{ $banner->redirect_link }}" placeholder="Ex: www.google.com"
                                                   required>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label class="input-label" for="time_period">
                                            {{ translate('time_period') }} <span class="text-danger">*</span>
                                        </label>
                                        <select name="time_period" class="custom-select js-select2-custom" id="time_period"
                                                aria-label="{{ translate('time_period') }}" required>
                                            <option disabled {{ !$banner->time_period ? 'selected' : '' }}>
                                                {{ translate('select_time_period') }}
                                            </option>
                                            <option value="{{ ALL_TIME }}" {{ $banner->time_period == ALL_TIME ? 'selected' : '' }}>
                                                {{ translate(ALL_TIME) }}
                                            </option>
                                            <option value="period" {{ $banner->time_period == 'period' ? 'selected' : '' }}>
                                                {{ translate('period') }}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="row mt-3 {{ $banner->start_date && $banner->end_date ? '' : 'd-none' }}"
                                         id="datePickContainer">
                                        <div class="col-sm-6">
                                            <div class="form-group mb-0">
                                                <label class="input-label" for="start_date">
                                                    {{ translate('start_date') }}
                                                </label>
                                                <input type="date" name="start_date" id="start_date"
                                                       min="{{ date('Y-m-d', strtotime(now())) }}"
                                                       value="{{ $banner->start_date }}" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group mb-0">
                                                <label class="input-label" for="end_date">
                                                    {{ translate('end_date') }}
                                                </label>
                                                <input type="date" name="end_date" id="end_date"
                                                       min="{{ date('Y-m-d', strtotime(now())) }}"
                                                       value="{{ $banner->end_date }}" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="h-100 d-flex flex-column justify-content-between">
                                        <div class="form-group">
                                            <label class="fs-16 text-title font-semibold mb-0">
                                                {{ translate('banner_image') }} <span class="text-danger">*</span>
                                            </label>
                                            <p class="mb-20">
                                                {{ translate('JPG, JPEG, PNG Less Than 5MB') }}
                                                <span class="font-weight-bold">({{ translate('Ratio 3:1') }})</span>
                                            </p>
                                            <div class="upload-file image-general">
                                                <a href="javascript:void(0);" class="remove-btn {{ $banner->image ? '' : 'opacity-0' }} z-index-99">
                                                    <i class="tio-clear"></i>
                                                </a>
                                                <input type="file" name="banner_image" class="upload-file__input single_file_input"
                                                       accept=".jpg, .jpeg, .png">
                                                <label class="upload-file-wrapper fullwidth">
                                                    <div class="upload-file-textbox text-center {{ $banner->image ? 'd-none' : '' }}">
                                                        <img width="34" height="34"
                                                             src="{{ asset('public/assets/admin/img/document-upload.svg') }}"
                                                             alt="">
                                                        <h6 class="mt-2 font-semibold text-center">
                                                            <span>{{ translate('Click to upload') }}</span>
                                                            <br>
                                                            {{ translate('or drag and drop') }}
                                                        </h6>
                                                    </div>
                                                    <img class="upload-file-img {{ $banner->image ? '' : 'd-none' }}"
                                                         loading="lazy"
                                                         src="{{ onErrorImage(
                                                             $banner?->image,
                                                             asset('storage/app/public/promotion/banner') . '/' . $banner?->image,
                                                             asset('public/assets/admin/img/900x400/img1.jpg'),
                                                             'promotion/banner/'
                                                         ) }}"
                                                         alt="">
                                                </label>
                                            </div>
                                        </div>
                                        <div class="btn--container justify-content-end">
                                            <button type="reset" id="reset_btn" class="btn btn--reset">
                                                {{ translate('reset') }}
                                            </button>
                                            <button type="submit" class="btn btn--primary">
                                                {{ translate('submit') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script_2')
    <script src="{{ asset('public/assets/admin-module/js/promotion-management/banner-setup/edit.js') }}"></script>
    <script>
        "use strict";
        function toggleDatePick() {
            var timePeriodSelect = document.getElementById('time_period');
            var datePickContainer = document.getElementById('datePickContainer');
            if (timePeriodSelect.value === "{{ ALL_TIME }}") {
                datePickContainer.classList.add('d-none');
            } else {
                datePickContainer.classList.remove('d-none');
            }
        }

        document.getElementById('time_period').addEventListener('change', toggleDatePick);

        $('#banner_form').submit(function (e) {
            let timePeriod = $('#time_period').val();

            if (timePeriod === 'period' && $('#start_date').val() === '') {
                toastr.error('{{ translate('please_select_start_date') }}');
                e.preventDefault();
            }

            if (timePeriod === 'period' && $('#end_date').val() === '') {
                toastr.error('{{ translate('please_select_end_date') }}');
                e.preventDefault();
            }

            if (!timePeriod) {
                toastr.error('{{ translate('please_select_time_period') }}');
                e.preventDefault();
            }
        });
    </script>
@endpush