@extends('layouts.customer')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />

    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"> -->
    <style>
        .input-group-prepend .input-group-text::before {
            content: "";
        }
        .dd-head {font-size: 18px;}
        .search.search-sm:after {content: '' !important;}  
        .higher-order-backdrop .modal-backdrop {z-index: 1051 !important;} 
        .higher-order-backdrop .modal-backdrop:not(:last-child) { background-color: transparent !important; } 
        .higher-order-backdrop #updateTipModalRight, .higher-order-backdrop #addTipModalRight, .higher-order-backdrop #deleteTipModalRight {z-index: 1060 !important;}

        /* Spinner */
        .show-spinner>*{opacity:0;}
        .show-spinner::after {
            content: " ";
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 2px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            border-top-color: rgba(0, 0, 0, 0.3);
            animation: spin 1s ease-in-out infinite;
            -webkit-animation: spin 1s ease-in-out infinite;
            left: calc(50% - 15px);
            top: calc(50% - 15px);
            position: fixed;
            z-index: 1;
        }
    </style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Tips</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('/')}}/dashboard">Dashboard</a>
                            </li>

                            <li class="breadcrumb-item active" aria-current="page">Tips</li>
                        </ol>
                    </nav>
                    <button type="button" class="btn btn-secondary float-right btn-sm add-clock-time" data-toggle="modal" data-backdrop="static" data-target="#addTipModalRight">Add Cash Tip</button>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row mb-2">
                
            </div>

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

                            <div class="m-3">
                                @if( $tips )
                                    <div id="DataTables_Table_0_wrapper">
                                        <table class="data-table table" id="DataTables_Table_0">
                                            <thead>
                                                <tr>
                                                    <th>Tip No.</th>
                                                    <th>Location</th>
                                                    <th>Date</th>
                                                    <th>Tip Amount</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach( $tips as $tip )
                                                    <tr>
                                                        <td>{{ 'TIP-101-N-' . $tip->id }}</td>
                                                        <td>{{ collect($locations)->get($tip->location_id) ?? 'N/A' }}</td>
                                                        <td>{{ date('M d, Y | H:iA',strtotime($tip->date)) ?? '' }}</td>
                                                        <td>${{ number_format(round($tip->amount, 2), 2) ?? '' }}</td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <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">    
                                                                        <a class="dropdown-item pe-3 edit-dropdown-option" data-action="{{ route('tips.update', ['account' => $account, 'tip'=>$tip->id]) }}" data-date="{{ $tip->date }}" data-amount="{{ $tip->amount }}" data-location="{{ $tip->location_id ?? '' }}" data-toggle="modal" data-backdrop="static" data-target="#editTipModalRight">
                                                                            Edit
                                                                        </a> 
                                                                        <a class="dropdown-item pe-3 delete-dropdown-option" data-action="{{ route('tips.destroy', ['account' => $account, 'tip'=>$tip->id]) }}" data-toggle="modal" data-backdrop="static" data-target="#deleteTipModal">
                                                                            Delete
                                                                        </a>                                 
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <p>No record found!</p>
                                @endif
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Model -->
        <div class="modal fade modal-right" id="addTipModalRight" tabindex="-1" role="dialog" aria-labelledby="addTipModalRight" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Cash Tip</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="ajax_response"></div>
                        <form action="{{ route('tips.store', ['account'=>$account]) }}" method="POST" id="add-tip-form">
                            <div class="form-group">
                                <label>Date</label>
                                <input type="text" class="form-control datetimepicker-input" name="date" id="datetimepicker1" data-toggle="datetimepicker" data-target="#datetimepicker1" required>
                            </div>

                            <div class="form-group">
                                <label>Amount</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="number" class="form-control" name="amount" id="amount" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Locations</label>
                                <select class="form-control" name="location_id">
                                    <option value="">__SELECT__</option>
                                    @foreach( $locations as $location_id => $name )
                                        <option value="{{ $location_id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="save-tip-data">Add Tip</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Model -->
        <div class="modal fade modal-right" id="editTipModalRight" tabindex="-1" role="dialog" aria-labelledby="editTipModalRight" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Tip</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="ajax_response"></div>
                        <form method="POST" id="update-tip-form">
                            @csrf
                            @method('PUT')
                            <div class="form-group">
                                <label>Date</label>
                                <input type="text" class="form-control datetimepicker-input" name="date" id="datetimepicker2" data-toggle="datetimepicker" data-target="#datetimepicker2" required>
                            </div>

                            <div class="form-group">
                                <label>Amount</label>
                                <input type="number" class="form-control" name="amount" id="amount" required>
                            </div>

                            <div class="form-group">
                                <label>Locations</label>
                                <select class="form-control" name="location_id">
                                    <option value="">__SELECT__</option>
                                    @foreach( $locations as $location_id => $name )
                                        <option value="{{ $location_id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="update-tip-data">Update Tip</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Model -->
        <div class="modal fade" id="deleteTipModal" tabindex="-1" role="dialog" aria-labelledby="deleteTipModal" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Delete Tip</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this cash tip?
                    </div>
                    <div class="modal-footer">
                        <form id="delete-tip-from" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="delete-tip-data">Delete Tip</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {   
        var table, clocked_data, addModal = $("#addTipModalRight");

        addModal.on('show.bs.modal', function(){
            // Set current datetime to add modal
            $('#datetimepicker1').data('datetimepicker').date(new Date());

            $('body').addClass('higher-order-backdrop');
        });

        addModal.on('hide.bs.modal', function(){
            $('body').removeClass('higher-order-backdrop');
        });

        $('.edit-dropdown-option').on('click', function() {
            let form = $('#update-tip-form'),
                date = $(this).data('date'),
                amount = $(this).data('amount'),
                location_id = $(this).data('location'),
                route = $(this).data('action');
                
            // Reset modal form
            form.get(0).reset(); // reset

            // Change form update url
            form.attr("action", route);

            // Update new value
            form.find('input[name="amount"]').val( amount );
            form.find('select[name="location_id"] option[value="'+location_id+'"]')
                .prop('selected', true);
            $('#datetimepicker2').data("datetimepicker").date(moment(date));
        });

        $('.delete-dropdown-option').on('click', function() {
            let form = $('#delete-tip-from'),
                route = $(this).data('action');
                
            // Reset modal form
            form.get(0).reset(); // reset

            // Change form update url
            form.attr("action", route);
        });

        // datetimepicker
        $(function () {
            $.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
                icons: {
                    time: 'simple-icon-clock',
                    date: 'simple-icon-calendar',
                    up: 'simple-icon-arrow-up',
                    down: 'simple-icon-arrow-down',
                    previous: 'simple-icon-arrow-left',
                    next: 'simple-icon-arrow-right',
                    today: 'simple-icon-calendar',
                    clear: 'simple-icon-trash',
                    close: 'simple-icon-close'
                } 
            });

            // Add Modal
            $('#datetimepicker1').datetimepicker({
                useCurrent: false,
                maxDate: new Date(), // Disable future dates
                widgetPositioning: {
                    vertical: 'bottom', // always opens to bottom direction
                },
            });

            // Edit Model
            $('#datetimepicker2').datetimepicker({
                useCurrent: false,
                maxDate: new Date(), // Disable future dates
                widgetPositioning: {
                    vertical: 'bottom', // always opens to bottom direction
                },
            });

        });

        $("#save-tip-data").on('click', function() {
            $("#add-tip-form").submit();
        });

        $("#update-tip-data").on('click', function() {
            $("#update-tip-form").submit();
        });

        $( "#add-tip-form" ).submit(function( event ) {
            let form = $(this);
            if($( "#add-tip-form #amount").val() == ''){
                $('.ajax_response').html('<p class="alert alert-danger">Please enter the amount.</p>');
                return false;
            }
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                dataType: 'json',
                beforeSend: function() {
                    form.parent('.modal-body').addClass('show-spinner');
                },
                success: function( response ) {
                    if( response.status ) {
                        // alert( response.message )
                        $('.ajax_response').html('<p class="alert alert-success">Amount added successfully.</p>');
                        location.reload();
                    } else {
                        $('.ajax_response').html('<p class="alert alert-danger">'+ response.message +'</p>');
                        // alert( response.message )
                    }
                    // console.log( response );
                },
                error: function( error ) {
                    // console.log( error );
                },
                complete: function() {
                    form.parent('.modal-body').removeClass('show-spinner');
                },
            });

            event.preventDefault();  
            return false;
        });

        $( "#update-tip-form" ).submit(function( event ) {
            let form = $(this);

            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                dataType: 'json',
                beforeSend: function() {
                    form.parent('.modal-body').addClass('show-spinner');
                },
                success: function( response ) {
                    if( response.status ) {
                        // alert( response.message )
                        $('.ajax_response').html('<p class="alert alert-success">Amount updated successfully.</p>');
                        location.reload();
                    } else {
                        // alert( response.message )
                        $('.ajax_response').html('<p class="alert alert-danger">'+ response.message +'</p>');
                    }
                    // console.log( response );
                },
                error: function( error ) {
                    // console.log( error );
                },
                complete: function() {
                    form.parent('.modal-body').removeClass('show-spinner');
                },
            });

            event.preventDefault();  
            return false;
        }); 
    });

    // datetimepicker
    (function($) {
        $(document).ready(function() {
            // datetimepicker
            $(function () {
                $.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
                    icons: {
                        time: 'simple-icon-clock',
                        date: 'simple-icon-calendar',
                        up: 'simple-icon-arrow-up',
                        down: 'simple-icon-arrow-down',
                        previous: 'simple-icon-arrow-left',
                        next: 'simple-icon-arrow-right',
                        today: 'simple-icon-calendar',
                        clear: 'simple-icon-trash',
                        close: 'simple-icon-close'
                    } 
                });
            });
        });
    })(jQuery);
</script>
@endsection