@extends('layouts.app')
@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        {{ $title }}</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Offers</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card header-->
                    <div class="card-header mt-6">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1 me-5">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                            rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                        <path
                                            d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text" data-kt-offer-table-filter="search"
                                    class="form-control form-control-solid w-250px ps-15" placeholder="Search Here" />
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--end::Card title-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar">
                            <!--begin::Button-->
                            <div class="d-flex justify-content-end" data-kt-docs-table-toolbar="base">
                                <!--begin::Add customer-->
                                <a href="{{ route('offer.add-offer') }}" class="btn btn-primary">
                                    <i class="ki-duotone ki-plus fs-2"></i>
                                    Add Offer
                                </a>
                                <!--end::Add customer-->
                            </div>
                            {{-- @endcan --}}
                            <!--end::Button-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0" id="kt_offer_table">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="min-w-125px">#</th>
                                    <th class="min-w-125px">Image</th>
                                    <th class="min-w-125px">Start Time</th>
                                    <th class="min-w-125px">End Time</th>
                                    <th class="min-w-125px">Status</th>
                                    <th class="text-end min-w-100px">Actions</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">
                                @foreach ($offers as $key => $offer)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <!--begin::Name=-->
                                        <td class="d-flex align-items-center">
                                            <!--begin:: Avatar -->
                                            @if ($offer->image == null)
                                                <div class="symbol symbol-50px me-5">
                                                    <img class="symbol symbol-50px me-5" style="background-color: #ffffff;"
                                                        src="{{ asset('assets/media/svg/files/blank-image.svg') }}">
                                                </div>
                                            @else
                                                <div class="symbol symbol-50px me-5">
                                                    <img class="symbol symbol-50px me-5" style="background-color: #ffffff;"
                                                        src="{{ asset('storage/offer_image/' . $offer->image) }}">
                                                </div>
                                            @endif
                                        </td>
                                        <td>{{ $offer->start_date }}</td>
                                        <td>{{ $offer->end_date }}</td>
                                        <td>
                                            @if (auth()->user()->hasRole('admin'))
                                                @if ($offer->is_approved == 0)
                                                    <a href="javascript:void(0)"
                                                        class="badge badge-light-success fw-bold change-status"
                                                        data-table="offers" data-id={{ $offer->id }} data-status="1"
                                                        data-action="{{ route('change-status') }}">Approve
                                                    </a>
                                                @elseif($offer->is_approved == 1)
                                                    <a href="javascript:void(0)"
                                                        class="badge badge-light-danger fw-bold change-status"
                                                        data-table="offers" data-id={{ $offer->id }} data-status="2"
                                                        data-action="{{ route('change-status') }}">Reject
                                                    </a>
                                                @elseif($offer->is_approved == 2)
                                                    <a href="javascript:void(0)" class="badge badge-light-danger">Rejected
                                                    </a>
                                                @endif
                                            @else
                                                @if ($offer->is_approved == 0)
                                                    <a href="javascript:void(0)" class="badge badge-light-danger fw-bold"
                                                        data-table="offers">Pending
                                                    </a>
                                                @elseif($offer->is_approved == 1)
                                                    <a href="javascript:void(0)"
                                                        class="badge badge-light-success fw-bold">Approved
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)"
                                                        class="badge badge-light-danger fw-bold">Rejected
                                                    </a>
                                                @endif
                                            @endif
                                        </td>
                                        <!--end::Created Date-->
                                        <!--begin::Action=-->
                                        <td class="text-end">
                                            <!--begin::Update-->
                                            {{-- <button
                                                class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 view-offer"
                                                data-value="{{ $offer }}">
                                                <!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
                                                <span
                                                    class="svg-icon svg-icon-2"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo8/dist/../src/media/svg/icons/Code/Info-circle.svg--><svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                                        height="24px" viewBox="0 0 24 24" version="1.1">
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <rect x="0" y="0" width="24" height="24" />
                                                            <circle fill="#000000" opacity="0.3" cx="12"
                                                                cy="12" r="10" />
                                                            <rect fill="#000000" x="11" y="10" width="2"
                                                                height="7" rx="1" />
                                                            <rect fill="#000000" x="11" y="7" width="2"
                                                                height="2" rx="1" />
                                                        </g>
                                                    </svg><!--end::Svg Icon--></span>
                                                <!--end::Svg Icon-->
                                            </button> --}}
                                            <a href="{{ url('offer/edit-offer/' . $offer->uuid) }}"
                                                class="btn btn-icon btn-active-light-primary w-30px h-30px me-3">
                                                <!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
                                                <span class="svg-icon svg-icon-3"><svg width="24px" height="24px"
                                                        viewBox="0 0 24 24">
                                                        <path
                                                            d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z"
                                                            fill="currentColor" fill-rule="nonzero"
                                                            transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " />
                                                        <rect fill="#000000" opacity="0.3" x="5" y="20" width="15"
                                                            height="2" rx="1" />
                                                    </svg><!--end::Svg Icon--></span>
                                                <!--end::Svg Icon-->
                                            </a>
                                            <button
                                                class="btn btn-icon btn-active-light-primary w-30px h-30px offer-delete"
                                                data-id="{{ $offer->id }}" data-action="{{ route('delete') }}"
                                                data-offer="{{ $offer }}" data-table="promotions">
                                                <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                                                <span class="svg-icon svg-icon-3">
                                                    <svg width="24" height="24" viewBox="0 0 24 24"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
                                                            fill="currentColor"></path>
                                                        <path opacity="0.5"
                                                            d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
                                                            fill="currentColor"></path>
                                                        <path opacity="0.5"
                                                            d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->
                                            </button>
                                            <!--end::Update-->
                                        </td>
                                        <!--end::Action=-->
                                    </tr>
                                @endforeach

                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection
@push('script')
    <script src="{{ asset('assets/js/offer/list.js') }}"></script>
    <script>
        $(document).on('click', '.offer-delete', function() {
            let offer = JSON.parse($(this).attr('data-offer'));
            let table = $(this).attr('data-table');
            let id = $(this).attr('data-id');
            let url = $(this).attr('data-action');
            if (offer.is_approved === 0) {
                Swal.fire({
                    text: "Are you sure you would like to delete?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Yes, delete!",
                    cancelButtonText: "No, return",
                    customClass: {
                        confirmButton: "btn btn-danger",
                        cancelButton: "btn btn-active-light"
                    }
                }).then(function(result) {
                    if (result.value) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: {
                                table: table,
                                id: id
                            },
                            beforeSend: function() {
                                showLoader()
                            },
                            success: function(response) {
                                if (response.status == true) {
                                    showToast('success', 'PILLDROP', response.message);
                                    location.reload()
                                } else {
                                    showToast('error', 'PILLDROP', response.message);
                                }
                            },
                            error: function(response) {
                                showToast('error', 'PILLDROP', response.responseJSON.message);
                            },
                            complete: function() {
                                hideLoader()
                            }
                        });
                    } else if (result.dismiss === 'cancel') {

                    }
                })
            } else {
                Swal.fire("You Can not delete as it was Published or Rejected");
            }

        })
    </script>
@endpush