@extends('layouts.admin.admin')

@section('title', 'Order')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <header class="text-capitalize pt-1">
                <h5>{{ ucwords($status ?? config('custom.all')) }} Ceremony Cost Reconcile</h3>
            </header>
        </div>
        {{-- <div class="col-md-6 text-right">
            <a class="btn btn-primary ink-reaction btn" href="{{ route('order.invoice.export') }}">
                <i class="mdi mdi-excel"></i>
                Export Invoice
            </a>

        </div> --}}
    </div>
    <div>
        <div class="card">
            <div class="card-body">
                <form action="{{auth()->user()->hasRole(App\Modules\Models\Role\Role::SUPERADMIN) ? route('order.reconcile.export') : route('for-institution.order.reconcile.export') }}" method="post" target="_blank">
                    @csrf
                    <div class="row">
                        @if(auth()->user()->hasRole(App\Modules\Models\Role\Role::SUPERADMIN))
                        <input type="hidden" value="{{ route('order.reconcile.data') }}" id="route">
                        @else
                        <input type="hidden" value="{{ route('for-institution.order.reconcile.data') }}" id="route">
                        @endif
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="user" class="col-form-label pt-0">Choose Instituion</label>
                                <select data-placeholder="Select Option" id="institution_id"
                                    class="select2 tail-select  form-control" name="institution_id">
                                    @if (auth()->user()->hasRole(App\Modules\Models\Role\Role::SUPERADMIN))
                                    <option value="" selected>All</option>
                                    @endif
                                    @foreach ($institutions as $institute)
                                        <option value="{{ $institute->id }}">{{$institute->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <input type="hidden" id='type' name="status" value="{{$status}}">
                        <div class="col-md-4">
                            <label for="user" class="col-form-label pt-0">Date From</label>
                            <input type="date" class="form-control" id="date_from" name="date_from">
                        </div>
                        <div class="col-md-4">
                            <label for="user" class="col-form-label pt-0">Date To</label>
                            <input type="date" class="form-control" name="date_to" id="date_to">
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="user" class="col-form-label pt-0">Ceremony Total Amount</label>
                            <input type="text" disabled class="form-control" value="{{$total_amount}}" id="total_amount">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="user" class="col-form-label pt-0">Export CSV</label>
                            <button type="submit" class="btn btn-info btn-block">Export</button>
                        </div>
                        @if(auth()->user()->hasRole(App\Modules\Models\Role\Role::SUPERADMIN) && ucwords($status) ==  \App\Modules\Models\Order\Order::ORDER_CEREMONY_COST_RECONSILE_PENDING)
                        <div class="col-md-4">
                            <label for="user" class="col-form-label pt-0">Change Reconciliation Status</label>
                            <button type="button" class="btn btn-dark btn-block update-reconcile" id="processed-btn">Change to {{strtoupper(reconcileValue($status))}}</button>
                            <button class="btn btn-dark btn-block d-none" type="button" id="processing-btn" style="margin-top: 0" disabled>
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                Processing...
                              </button>
                            
                        </div>
                        @endif
                    </div>
                </form>
            </div>
        </div>
        <div class="card mt-2 p-4">
            <div class="table-responsive">

                <table id="datatable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Invoice Number</th>
                            <th>Order Date</th>
                            <th>Institute</th>
                            <th>Student Id</th>
                            <th>Student</th>
                            <th>Ceremony</th>
                            <th>Ceremony Cost</th>
                            <th>Reconciliation</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
@endsection


@section('page-specific-scripts')
    <script>
        $(document).ready(function() {
            var table = $('#datatable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": $('#route').val(),
                    data: function(d) {
                        d.institution_id = $('#institution_id').val(),
                        d.status = $('#type').val();
                        d.date_from = $('#date_from').val();
                        d.date_to = $('#date_to').val();
                    }
                },
                // dom: 'Bfrtip',
                // buttons: [
                //     'copy', 'csv', 'excel', 'pdf', 'print',
                //     // exportOptions: {
                //     //     columns: 'th:not(:last-child)'
                //     // }
                // ],
                // dom: 'Bfrtip',
                // buttons: [{
                //     extend: 'excel',
                //     text: 'Export Search Results',
                //     className: 'btn btn-default',
                //     exportOptions: {
                //         columns: 'th:not(:last-child)'
                //     }
                // }],
                "columns": [{
                        "data": "id",
                        'visible': false
                    },
                    {
                        "data": "invoice_number"
                    },
                    {
                        "data": "order_date_formatted"
                    },
                    
                    {
                        "data": "institution", orderable: false, searchable: false 
                    },
                    {
                        "data": "student_id", orderable: false, searchable: false 
                    },
                    {
                        "data": "graduate", orderable: false, searchable: false 
                    },
                    {
                        "data": "ceremony", orderable: false, searchable: false 
                    },
                    {
                        "data": "ceremony_cost_formatted", orderable: false, searchable: false 
                    },
                    {
                        "data": "is_reconsiled", orderable: false, searchable: false 
                    },
                ],
                order: [
                    [0, 'desc']
                ]
            });
            $('#institution_id').change(function(){
                table.draw();
                calculateTotalAmount();
                
            });
            $('#date_from').change(function(){
                table.draw();
                calculateTotalAmount();
            });
            $('#date_to').change(function(){
                table.draw();
                calculateTotalAmount();
            });
            $('.update-reconcile').click(function(e){
                updateReconcile(e);
                calculateTotalAmount();
                table.draw();
            });
           
        });
        function calculateTotalAmount() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                }
            });
            $.ajax({
                url: "{{ route('order.ceremony-amount') }}", 
                type: 'POST',
                data: {
                    'institution_id': $('#institution_id').val(),
                    'status': $('#type').val(),
                    'date_from': $('#date_from').val(),
                    'date_to': $('#date_to').val() 
                },
                success: function(result){
                    $("#total_amount").val(result);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        function updateReconcile() {
            if ($('#date_from').val() == '' || $('#date_to').val() == '') {
                alert('Please Select Date From & Date To');
                e.preventDefault();
            }
            $('#processing-btn').removeClass('d-none');
            $('#processed-btn').addClass('d-none');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                }
            });
            $.ajax({
                url: "{{ route('order.reconcile.massupeate') }}", 
                type: 'POST',
                data: {
                    'institution_id': $('#institution_id').val(),
                    'status': $('#type').val(),
                    'date_from': $('#date_from').val(),
                    'date_to': $('#date_to').val() 
                },
                success: function(result){
                    console.log(result);
                    $('#processed-btn').removeClass('d-none');
                    $('#processing-btn').addClass('d-none');
                    // $("#total_amount").val(result);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    </script>
@endsection