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

@extends('layouts.admin.app')

@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('banner_Setup') }}</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('add_new_banner') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.promotion.banner-setup.store') }}" id="banner_form"
                                  enctype="multipart/form-data" method="POST">
                                @csrf
                                <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" value="{{ old('banner_title') }}" class="form-control"
                                                       id="banner_title" name="banner_title" 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="5" maxlength="800" data-max-character="800"
                                                              required>{{ old('short_desc') }}</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" value="{{ old('redirect_link') }}"
                                                       id="redirect_link" name="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
                                                    onchange="toggleDatePick()">
                                                <option value="" disabled selected>{{ translate('select_time_period') }}</option>
                                                <option value="{{ ALL_TIME }}">{{ translate(ALL_TIME) }}</option>
                                                <option value="period">{{ translate('period') }}</option>
                                            </select>
                                        </div>
                                        <div class="row date-pick mt-3" id="datePickContainer" style="display: none;">
                                            <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" value="{{ old('start_date') }}" name="start_date"
                                                           id="start_date" min="{{ date('Y-m-d', strtotime(now())) }}"
                                                           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" value="{{ old('end_date') }}" name="end_date"
                                                           id="end_date" min="{{ date('Y-m-d', strtotime(now())) }}"
                                                           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 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" required>
                                                    <label class="upload-file-wrapper fullwidth">
                                                        <div class="upload-file-textbox text-center">
                                                            <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 d-none" loading="lazy" 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 class="col-sm-12 col-lg-12 mb-3 mb-lg-2">
                <div class="card">
                    <div class="card-header py-2">
                        <div class="search--button-wrapper gap-20px">
                            <h5 class="card-title text--title flex-grow-1">
                                {{ translate('banner_list') }}
                                <span class="badge badge-soft-dark ml-2" id="total_record_count">{{ $banners->total() }}</span>
                            </h5>
                            <form class="search-form m-0 flex-grow-1 max-w-353px" action="{{ url()->full() }}" method="GET">
                                <div class="input-group input--group">
                                    <input id="search" type="search" value="{{ request()->get('search') }}"
                                           name="search" class="form-control"
                                           placeholder="{{ translate('search_here_by_Banner_Title') }}"
                                           aria-label="{{ translate('search_here_by_Banner_Title') }}">
                                    <button type="submit" class="btn btn--secondary bg--primary">
                                        <i class="tio-search"></i>
                                    </button>
                                </div>
                            </form>
                            @if (request()->get('search'))
                                <button type="reset" class="btn btn--primary ml-2 location-reload-to-base"
                                        data-url="{{ url()->full() }}">{{ translate('reset') }}</button>
                            @endif
                            <div class="hs-unfold m-0">
                                <a class="js-hs-unfold-invoker btn btn-sm btn-white dropdown-toggle min-height-40 font-semibold"
                                   href="javascript:;"
                                   data-hs-unfold-options='{
                                       "target": "#usersExportDropdown",
                                       "type": "css-animation"
                                   }'>
                                    <i class="tio-download-to mr-1"></i> {{ translate('export') }}
                                </a>
                                <div id="usersExportDropdown"
                                     class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm-right">
                                    <span class="dropdown-header">{{ translate('download_options') }}</span>
                                    <a id="export-excel" class="dropdown-item"
                                       href="{{ route('admin.promotion.banner-setup.export', ['type' => 'excel', request()->getQueryString()]) }}">
                                        <img class="avatar avatar-xss avatar-4by3 mr-2"
                                             src="{{ asset('public/assets/admin/svg/components/excel.svg') }}"
                                             alt="Image Description">
                                        {{ translate('excel') }}
                                    </a>
                                    <a id="export-csv" class="dropdown-item"
                                       href="{{ route('admin.promotion.banner-setup.export', ['type' => 'csv', request()->getQueryString()]) }}">
                                        <img class="avatar avatar-xss avatar-4by3 mr-2"
                                             src="{{ asset('public/assets/admin/svg/components/placeholder-csv-format.svg') }}"
                                             alt="Image Description">
                                        .{{ translate('csv') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive datatable-custom">
                        <ul class="nav nav-tabs border-0 mb-3">
                            <li class="nav-item">
                                <a class="nav-link {{ !request()->has('status') || request()->get('status') == 'all' ? 'active' : '' }}"
                                   href="{{ url()->current() }}?status=all">
                                    {{ translate('all') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->get('status') == 'active' ? 'active' : '' }}"
                                   href="{{ url()->current() }}?status=active">
                                    {{ translate('active') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->get('status') == 'inactive' ? 'active' : '' }}"
                                   href="{{ url()->current() }}?status=inactive">
                                    {{ translate('inactive') }}
                                </a>
                            </li>
                        </ul>
                        <table id="columnSearchDatatable"
                               class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                            <thead class="thead-light">
                                <tr>
                                    <th class="border-0">{{ translate('SL') }}</th>
                                    <th class="border-0">{{ translate('banner_title') }}</th>
                                    <th class="border-0">{{ translate('banner_image') }}</th>
                                    <th class="border-0">{{ translate('redirect_link') }}</th>
                                    <th class="border-0">{{ translate('number_of') }}<br>{{ translate('total_direction') }}</th>
                                    <th class="border-0">{{ translate('time_period') }}</th>
                                    <th class="border-0 text-center">{{ translate('status') }}</th>
                                    <th class="border-0 text-center">{{ translate('action') }}</th>
                                </tr>
                            </thead>
                            <tbody id="set-rows">
                                @forelse ($banners as $key => $banner)
                                    <tr id="hide-row-{{ $banner->id }}">
                                        <td>{{ $banners->firstItem() + $key }}</td>
                                        <td>
                                            <span class="media align-items-center">
                                                <div class="media-body">
                                                    <h5 title="{{ $banner->name }}" class="text-hover-primary mb-0">
                                                        {{ Str::limit($banner->name, 25, '...') }}
                                                    </h5>
                                                </div>
                                            </span>
                                        </td>
                                        <td>
                                            <img class="img--ratio-3 w-auto h--50px rounded mr-2 onerror-image"
                                                 src="{{ onErrorImage(
                                                     $banner?->image,
                                                     asset('storage/app/public/promotion/banner') . '/' . $banner?->image,
                                                     asset('public/assets/admin/img/900x400/img1.jpg'),
                                                     'promotion/banner/'
                                                 ) }}"
                                                 data-onerror-image="{{ asset('public/assets/admin/img/900x400/img1.jpg') }}"
                                                 alt="{{ $banner->name }} image">
                                        </td>
                                        <td>
                                            <span class="fs-10 text-break">{{ $banner->redirect_link }}</span>
                                        </td>
                                        <td>{{ (int) $banner->total_redirection }}</td>
                                        <td>
                                            @if ($banner->time_period == 'period')
                                                {{ $banner->start_date }} {{ translate('to') }} {{ $banner->end_date }}
                                            @else
                                                {{ str_replace('_', ' ', $banner->time_period) }}
                                            @endif
                                        </td>
                                        
                                            <td>
                                                <div class="d-flex justify-content-center">
                                                    <label class="toggle-switch toggle-switch-sm" for="statusCheckbox{{ $banner->id }}">
                                                        <input type="checkbox"
                                                               data-id="statusCheckbox{{ $banner->id }}"
                                                               data-type="status"
                                                               data-image-on="{{ asset('/public/assets/admin/img/modal/basic_campaign_on.png') }}"
                                                               data-image-off="{{ asset('/public/assets/admin/img/modal/basic_campaign_off.png') }}"
                                                               data-title-on="{{ translate('By_Turning_ON_Banner!') }}"
                                                               data-title-off="{{ translate('By_Turning_OFF_Banner!') }}"
                                                               data-text-on="<p>{{ translate('If_you_turn_on_this_status,_it_will_show_on_user_website_and_app.') }}</p>"
                                                               data-text-off="<p>{{ translate('If_you_turn_off_this_status,_it_won’t_show_on_user_website_and_app') }}</p>"
                                                               class="toggle-switch-input dynamic-checkbox status-change"
                                                               data-url="{{ route('admin.promotion.banner-setup.status') }}"
                                                               id="statusCheckbox{{ $banner->id }}"
                                                               {{ $banner->is_active ? 'checked' : '' }}>
                                                        <span class="toggle-switch-label">
                                                            <span class="toggle-switch-indicator"></span>
                                                        </span>
                                                    </label>
                                                </div>
                                            </td>
                                            <form action="{{ route('admin.promotion.banner-setup.status') }}"
                                                  method="post" id="statusCheckbox{{ $banner->id }}_form">
                                                @csrf
                                                <input type="hidden" name="id" value="{{ $banner->id }}">
                                            </form>
                                       
                                        <td>
                                            <div class="btn--container justify-content-center">
                                                
                                                    <a class="btn action-btn btn--primary btn-outline-primary"
                                                       href="{{ route('admin.promotion.banner-setup.log') }}?id={{ $banner->id }}"
                                                       title="{{ translate('view_Log') }}">
                                                        <i class="tio-time"></i>
                                                    </a>
                                               
                                                    <a class="btn action-btn btn--primary btn-outline-primary"
                                                       href="{{ route('admin.promotion.banner-setup.edit', ['id' => $banner->id]) }}"
                                                       title="{{ translate('edit_banner') }}">
                                                        <i class="tio-edit"></i>
                                                    </a>
                                               
                                                    <a class="btn action-btn btn--danger btn-outline-danger form-alert"
                                                       href="javascript:"
                                                       data-id="delete-{{ $banner->id }}"
                                                       data-message="{{ translate('want_to_delete_this_banner?') }}"
                                                       title="{{ translate('delete_banner') }}">
                                                        <i class="tio-delete-outlined"></i>
                                                    </a>
                                                    <form action="{{ route('admin.promotion.banner-setup.delete', ['id' => $banner->id]) }}"
                                                          method="post" id="delete-{{ $banner->id }}">
                                                        @csrf
                                                        @method('delete')
                                                    </form>
                                                
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8">
                                            <div class="empty--data">
                                                <img src="{{ asset('/public/assets/admin/svg/illustrations/sorry.svg') }}"
                                                     alt="public">
                                                <h5>{{ translate('no_data_found') }}</h5>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if (count($banners) !== 0)
                        <hr>
                    @endif
                    <div class="page-area">
                        {!! $banners->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script_2')
    <script src="{{ asset('public/assets/admin-module/js/promotion-management/banner-setup/index.js') }}"></script>
    <script>
        "use strict";

        function toggleDatePick() {
            var timePeriodSelect = document.getElementById('time_period');
            var datePickContainer = document.getElementById('datePickContainer');

            if (timePeriodSelect.value === "{{ ALL_TIME }}") {
                datePickContainer.style.display = 'none';
            } else {
                datePickContainer.style.display = 'flex';
            }
        }

        $('#banner_form').submit(function (e) {
            var 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