@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Offer</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>

            <div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
                    <div class="d-inline-flex mt-3 mt-sm-0">
                        <a href="{{ route('offer.create') }}"
                            class="status-indicator-container ms-1 btn btn-primary rounded-pill">
                            Add Offer
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Offer</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <form action="{{ route('offer.index') }}">
            <div class="row">
                <div class="col-lg-6 d-flex gap-3 align-center">
                    <div class="col-lg-3 mb-3">
                        {{ Form::select('filter_type',['' => 'Select Filter',] + PROMO_CODE_FOR,$selectedFilterName,
                        ['class' => 'form-select', 'id' => 'filter-type'],
                        ) }}
                    </div>
                    <div class="filter-bars col-4 d-none">
                        <div class="col-lg-2 filter-value-wrapper input-group category-filter{{ $selectedFilterName != 'customer' ? 'd-none' : '' }}">
                                {{ Form::select('promocode_type[]', OCCASION, $selectedOptions, [
                                    'class' => 'form-control multiselect form-select',
                                    'id' => 'categoty-filter-select',
                                    'multiple' => 'multiple',
                                    'data-include-select-all-option' => 'data-include-select-all-option',
                                ]) }}
                        </div>
                    </div>
                    <div class="col-4 d-flex gap-2 align-items-center">
                        <div class="mb-auto">
                            <button type="submit" class="btn btn-primary btn-sm" id="search-filter">Search</button>
                            <button type="submit" class="btn btn-primary btn-sm d-none" id="clear-filter">Clear Filter</button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row justify-content-end">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <input type="text" name="q" id="searchTerm" class="form-control"
                                    placeholder="Search..." value="{{ $searchTerm ?? '' }}">
                            </div>
                        </div>

                        <div class="col-lg-3" style="text-align: right">
                            <div class="mb-3">
                                <button type="button" id="searchBtn" class="btn btn-primary btn-sm"
                                    style="width: 100%">Search</button>
                            </div>
                        </div>

                    </div>
                </div>
        </form>

        <div class="card">

            <div class="table-responsive">
                <table class="table table-bordered" id="offer-table">
                    <thead>
                        <tr>
                            <th>Offer Code</th>
                            <th>Offer For</th>
                            <th>Offer Title</th>
                            <th>Offer Type</th>
                            <th>Offer Value</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("body").on("change", ".customer-status-change", function(e) {
                e.preventDefault();

                const offerId = $(this).attr("data-id");

                const status = $(this).is(':checked');

                Swal.fire({
                    title: 'Are you sure that you want to change status of this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('update.offer.status') }}",
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                offer_id: offerId,
                                status: status ? 1 : 0,
                                _token: token
                            },
                            success: function(response, textStatus, jqXHR) {
                                showToast(response.message)
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                showToast(
                                    'Oops! some error occured, please try again', {
                                        type: 'error',
                                        icon: 'error'
                                    });
                            }
                        });
                    }
                })
            });

            $("body").on("click", ".delete-resource", function(e) {
                e.preventDefault();

                const formId = $(this).attr("data-form-id");

                console.log("formId", formId)

                Swal.fire({
                    title: 'Are you sure that you want to delete this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        document.getElementById(formId).submit();
                    }
                })
            });

            $("body").on("change", "#filter-type", function(e) {
                const val = $(this).val();

                //alert(val)
                $('.filter-bars').removeClass('d-none')
                if (val == "" || val == "advisor") {
                    $(".filter-value-wrapper").addClass("d-none");
                    $('.filter-bars').addClass('d-none')

                } else {
                    $(".filter-value-wrapper").removeClass("d-none");
                }
            });
        });
    </script>
        <script>
            $(document).ready(function() {
                var table = $('#offer-table').DataTable({
                    buttons: {
                        dom: {
                            button: {
                                className: 'btn btn-light'
                            }
                        },
                        buttons: [{
                                extend: 'copy'
                            },
                            {
                                extend: 'csv'
                            },
                            {
                                extend: 'excel'
                            },
                            {
                                extend: 'pdf'
                            },
                            {
                                extend: 'print'
                            }
                        ]
                    },
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    order: [[4, 'desc']],
                    ajax: '{{ route('offer.index') }}',
                    columns: [
                        {
                            data: 'title',
                            name: 'title'
                        },
                        {
                            data: 'promocode_for',
                            name: 'promocode_for',
                            render: function(data,type,row){
                                 return `<span style='text-transform:capitalize'>${data}<span>`;
                            }
                        },
                        {
                            data: 'promocode_type',
                            name: 'promocode_type',
                            render: function(data,type,row){
                                if (row.promocode_for === 'customer') {
                                    return row.promocode_type == 'first_time' ? 'First Time' : 'Birthday';
                                } else {
                                    return 'Special Day';
                                }
                            }
                        },
                        {
                            data: null,
                            name: 'discount_type',
                            render: function(data,type,row){
                                 return row.promocode_for == 'customer'? 'Flat' : 'Percentage';
                            }

                          
                        },
                        {
                            data: 'discount_value',
                            name: 'discount_value',
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render: function(data, type, row) {
                                return `<label class="form-check form-check-inline form-switch m-0">
                                        <input type="checkbox" data-id="${row.id}" class="form-check-input customer-status-change" ${data == 1 ? 'checked' : ''}>
                                    </label>`;
                            }
                        },
                        {
                            data: null,
                            name: 'actions',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row) {
                                let editUrl = `{{ route('offer.edit', ':id') }}`.replace(':id', row
                                    .id);
                                let deleteFormId = `delete-form-${row.id}`;
                                let deleteUrl = `{{ route('offer.destroy', ':id') }}`.replace(':id', row.id);
                                let deleteAction = row.deleted_at ?
                                    '<i class="ph ph-archive" style="color:red;"></i>' :
                                    `<a href="javascript:void(0)" data-form-id="${deleteFormId}" class="text-body mx-1 delete-resource" title="Delete"><i class="ph-trash"></i></a>`;
                                return `<div class="d-inline-flex">
                                        <a href="${editUrl}" class="text-body mx-1" title="Edit"><i class="ph-pen"></i></a>
                                        ${deleteAction}
                                        <form id="${deleteFormId}" style="display:none" action="${deleteUrl}" method="POST">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                        </form>
                                    </div>`;
                            }
                        }
                    ]
                });
                $('#clear-filter').on('click', function(e) {
                    e.preventDefault();
                    var filter_type = $('#filter-type').val('');
                    from = $('#from').val('');
                    to = $('#to').val('');
                    $('.multiselect').each(function() {
                        $(this).multiselect('destroy');
                        $(this).val([]).trigger('change');
                        $(this).multiselect();  
                    });
                    $(this).addClass('d-none');
                    $('.filter-bars').addClass('d-none');
                    table.ajax.url("{{ route('offer.index') }}").load();
                });

                $('#offer-table_filter').hide();
                $('#offer-table_length').hide();
                $('#searchBtn').on('click', function() {
                    table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
                });
                $('#search-filter').on('click', function(e) {
                    e.preventDefault();
                    $('#clear-filter').removeClass('d-none');

                    var filter_type = $('#filter-type').val();
                    promocode_type = $('#categoty-filter-select').val();
                    var url = "{{ route('offer.index') }}" + 
                                    "?filter_type=" + filter_type +
                                    "&promocode_type=" + promocode_type;
                    table.ajax.url(url).load();
                    table.ajax.reload();
                });
                $('#searchTerm').on('keyup', function() {
                    table.search(this.value).draw(); // Use DataTable's search method
                });
            });
        </script>
@endsection