@extends('layouts.superadmin')

@section('content')
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Gift Cards</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="{{ url('/home') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('portal.restaurants.index') }}">Restaurants</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Gift Cards</li>
                        </ol>
                    </nav>
                    
                    <div class="text-zero top-right-button-container">
                        <div class="btn-group float-right">
                            <div class="btn btn-primary pl-4 pr-0 check-button">
                                <label class="custom-control custom-checkbox mb-0 d-inline-block">
                                    <input type="checkbox" class="custom-control-input" id="checkAll">
                                    <span class="custom-control-label">&nbsp;</span>
                                </label>
                            </div>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(-75px, 43px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a class="dropdown-item assigned">Mark as Assigned</a>
                                <a class="dropdown-item generatepdf">Generate GiftCards PDF</a>
                                <a class="dropdown-item generatezip">Generate GiftCards ZIP</a>
                            </div>
                            <form id="assigned" style="display:none;" action="{{ route('portal.restaurants.giftcards.assigned', $restaurant_id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="ids" />
                            </form>
                            <form id="generatepdf" style="display:none;" action="{{ route('portal.restaurants.giftcards.generatepdf', $restaurant_id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="ids" />
                            </form>
                            <form id="generatezip" style="display:none;" action="{{ route('portal.restaurants.giftcards.generatezip', $restaurant_id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="ids" />
                            </form>
                        </div>
                        <a href="{{ route('portal.restaurants.giftcards.create', $restaurant_id) }}" class="btn btn-secondary float-right">
                            <span style="color:white"></span> Generate Gift Card
                        </a>
                        <a href="{{ route('portal.restaurants.index') }}" class="btn btn-primary float-right mr-1">
                            <span style="color:white"></span> Back
                        </a>
                    </div>
                    
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row mb-4">
                <div class="col-12 mb-4">
                    <div class="card">                        
                        <div class="card-body">
                            <!-- table -->
                            <table class="table" id="data-table">
                                <thead>
                                    <tr>
                                        <th class="empty">
                                            <label class="custom-control custom-checkbox mb-1 align-self-center data-table-rows-check">
                                                <input type="checkbox" class="custom-control-input" id="checkTableFiltered" />
                                                <span class="custom-control-label">&nbsp;</span>
                                            </label>
                                        </th>
                                        <th>Gift Card No</th>
                                        <th>Gift Card</th>
                                        <th>Is Sold</th>
                                        <th>Is Assigned</th>
                                        <th>Created At</th>
                                        <th width="120px">{{ __('Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i = 0; @endphp
                                    @foreach($giftCards as $giftCard)
                                        <tr>
                                            <td>
                                                <label class="custom-control custom-checkbox mb-1 align-self-center data-table-rows-check">
                                                    <input type="checkbox" class="custom-control-input checkId" name="ids[]" value="{{ $giftCard->id }}" />
                                                    <span class="custom-control-label">&nbsp;</span>
                                                </label>
                                            </td>
                                            <td>{{ $giftCard->custom_id ?? '' }}</td>
                                            <td>
                                                <a href="{{ $giftCard->path }}" data-lightbox="giftcards" data-title="Gift Card - {{ $giftCard->custom_id }}">
                                                    <img width="48" src="{{ $giftCard->path }}" alt="Gift Card - {{ $giftCard->custom_id }}" />
                                                </a>
                                            </td>
                                            <td>{{ $giftCard->is_sold ? 'Sold' : 'Not Sold' }}</td>
                                            <td>{{ $giftCard->is_assigned ? 'Assigned' : 'Un-Assigned' }}</td>
                                            <td>{{ \Carbon\Carbon::parse($giftCard->created_at)->format('F j, Y g:i A') }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <div style="cursor: pointer;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="glyph-icon simple-icon-options-vertical"></div>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start">
                                                        <a class="dropdown-item pe-3" href="javascript:void(0);{{-- route('portal.restaurants.giftcards.show',$restaurant_id) --}}">
                                                            <i class="simple-icon-eye"></i> View
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            <!-- end table -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            let dataTable = $('#data-table').DataTable({
                columns: [
                    { data: "Check" },
                    { data: "Gift Card No" },
                    { data: "Gift Card" },
                    { data: "Is Sold" },
                    { data: "Is Assigned" },
                    { data: "Created At" },
                    { data: "Action" },
                ],
                order: {
                    name: 'Created At',
                    dir: 'asc'
                },
            });

            $("#checkAll").on("click", function (event) {
                $("#checkTableFiltered").prop('checked', false);
                if (dataTable.rows({selected: true}).count() > 0) {
                    dataTable.rows().deselect();
                    return;
                }
                dataTable.rows().select();
            });

            $("#checkTableFiltered").on("click", function (event) {
                // Remove previous selected
                $("#checkAll").prop('checked',false);
                if (dataTable.rows({selected: true}).count() > 0) {
                    dataTable.rows().deselect();
                }

                var checked = $(this).prop('checked');
                if (dataTable.rows({page: "current"}).count() > 0) {
                    if( checked ) {
                        dataTable.rows(function ( idx, data, node ) {
                            return $(node).find('input[type="checkbox"][name="ids[]"]').prop("checked", checked);
                        }, {page: "current"}).select();
                    } else {
                        dataTable.rows(function ( idx, data, node ) {
                            return $(node).find('input[type="checkbox"][name="ids[]"]').prop("checked", checked);
                        },{page: "current"}).deselect();
                    }
                }
                // var filteredRows = dataTable.$('.checkId', { "search": "applied" });
                // filteredRows.each(function (index, row) {
                //     $(row).prop("checked", checked);
                // });
                // console.log(filteredRows);
                // filteredRows.forEach(function (row) {
                //     console.log( row );
                //     $(row).find('input[type="checkbox"][name="ids[]"]').prop("checked", checked);
                // });
            });

            $(".assigned").on("click", function (event) {
                var matches = [];
                var selectedRows = dataTable.$(".checkId:checked", { "page": "all" });
                selectedRows.each(function (index, elem) {
                    matches.push($(elem).val());
                });

                if( matches.length ) {
                    $("#assigned")
                        .find('input[name="ids"]')
                        .val(matches.toString());
                    $('#assigned').trigger('submit');
                }
            });

            $(".unassigned").on("click", function (event) {
                var matches = [];
                var selectedRows = dataTable.$(".checkId:checked", { "page": "all" });
                selectedRows.each(function (index, elem) {
                    matches.push($(elem).val());
                });

                if( matches.length ) {
                    $("#unassigned")
                        .find('input[name="ids"]')
                        .val(matches.toString());
                    $('#unassigned').trigger('submit');
                }
            });

            $(".generatepdf").on("click", function () {
                var matches = [];
                var selectedRows = dataTable.$(".checkId:checked", { "page": "all" });
                selectedRows.each(function (index, elem) {
                    matches.push($(elem).val());
                });

                if( matches.length ) {
                    $("#generatepdf")
                        .find('input[name="ids"]')
                        .val(matches.toString());
                    $('#generatepdf').trigger('submit');
                }
            });

            $(".generatezip").on("click", function () {
                var matches = [];
                var selectedRows = dataTable.$(".checkId:checked", { "page": "all" });
                selectedRows.each(function (index, elem) {
                    matches.push($(elem).val());
                });

                if( matches.length ) {
                    $("#generatezip")
                        .find('input[name="ids"]')
                        .val(matches.toString());
                    $('#generatezip').trigger('submit');
                }
            });

            dataTable.on('select deselect', function( e, dt, type, indexes ) {
                // console.log( "Event: ", e );
                // console.log( "DataTable: ", dt );
                // console.log( "Type: ", type );
                // console.log( "Indexes: ", indexes );

                if (type === 'row') {
                    if (dt.rows().count() === dt.rows({selected: true}).count()) {
                        $("#checkAll").prop("checked", true);
                        // $("#checkAll").prop("indeterminate", true).trigger("change");

                        var data = dt.rows( function ( idx, data, node ) {
                            return $(node).find('input[type="checkbox"][name="ids[]"]').prop("checked", true);
                        }, { search: 'applied' } ).data().toArray();

                        console.log( "Data: ", data );

                        return;
                    }

                    if (dt.rows({selected: true}).count() === 0) {
                        $("#checkAll").prop("checked", false);
                        // $("#checkAll").prop("indeterminate", false).trigger("change");

                        var data = dt.rows( function ( idx, data, node ) {
                            return $(node).find('input[type="checkbox"][name="ids[]"]').prop("checked", false);
                        }, { search: 'applied' } ).data().toArray();

                        console.log( "Data: ", data );

                        return;
                    }

                    $("#checkAll").prop("checked", false);
                    // $("#checkAll").prop("indeterminate", false).trigger("change");
                }
            });
        });
    </script>
<!-- Lightbox2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />

<!-- Lightbox2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
</script>
@endsection