@extends('layouts.vertical', ['page_title' => 'Datatables'])

@section('css')
    <link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .card-box {
            background-color: #fff;
            padding: 1.5rem;
            box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, 0.03);
            margin-bottom: 24px;
            border-radius: 0.25rem;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">

        <div class="row align-items-center mb-3">
            <div class="col-md-6 p-2">
                <h4 class="page-title">{{ $title }} Management</h4>
            </div>

            <div class="col-md-6 p-2 text-end">
                @if (isset($buttons))
                    @foreach ($buttons as $button)
                        <a href="{{ $button['link'] }}"
                            class="btn btn-{{ $button['title'] == 'Add New' ? 'success' : 'dark' }} waves-effect waves-light me-2"
                            id="btn-{{ strtolower(str_replace(' ', '-', $button['title'])) }}">
                            {{ $button['title'] }}
                        </a>
                    @endforeach
                @endif
            </div>
        </div>

        <div class="row g-2 align-items-end mb-3">

            @php
                $roles = json_decode(auth()->user()->roles ?? '[]', true);
                $isDepotManager = in_array('1733912682-7c353bf8-c309-49b3-93e7-depotmanager', $roles);
                $isSuperDepotManager = in_array('1733912682-7c353bf8-c309-49b3-93e7-superdepotmanager', $roles);

            @endphp
            @if (!in_array('1733912682-7c353bf8-c309-49b3-93e7-depotmanager', $roles))
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <label for="depotStateFilter" class="form-label mb-1">Depot</label>
                    <select id="depotStateFilter" class="form-select form-select-sm">
                        <option value="">-- All Depots --</option>
                        @foreach ($depot as $dp)
                            <option value="{{ $dp }}">{{ $dp }}</option>
                        @endforeach
                    </select>
                </div>
                @if (!in_array('1733912682-7c353bf8-c309-49b3-93e7-superdepotmanager', $roles))
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <label for="nebstatusFilter" class="form-label mb-1">Status</label>
                    <select id="nebstatusFilter" class="form-select form-select-sm">
                        <option value="">-- All --</option>
                        @foreach ($status as $st)
                            <option value="{{ $st }}">{{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
            @endif

            @if ($isDepotManager || $isSuperDepotManager)
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <label for="nebstatusFilter" class="form-label mb-1">Status</label>
                    <select id="nebstatusFilter" class="form-select form-select-sm">
                        @foreach ($status as $st)
                            @if ($st == 'Approved' || $st == 'Dispatched')
                                <option value="{{ $st }}">{{ $st }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            @endif

            <div class="col-lg-3 col-md-4 col-sm-6">
                <label for="fromDate" class="form-label mb-1">From</label>
                <input type="date" id="fromDate" value="" class="form-control form-control-sm">
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <label for="toDate" class="form-label mb-1">To</label>
                <input type="date" id="toDate" class="form-control form-control-sm">
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6">
                <button class="btn btn-sm btn-primary w-100 mt-2" id="applyFilter">Fetch</button>
            </div>
        </div>



        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif


        <div class="row">
            <div class="col-12">
                <div class="card-box">


                    <div class="responsive-table-plugin">
                        <div class="table-rep-plugin">
                            <div class="table-responsive" data-pattern="priority-columns">
                                <table id="basic-datatable" class="table dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Employee Number</th>
                                            <th>Employee Name</th>
                                            <th>Team</th>
                                           
                                            
                                            <th>Depot Name</th>
                                            <th>Doctor Name</th>
                                            <th>MSL Code</th>

                                            <th>Status</th>

                                            <th>Request Date</th>
                                            <th data-priority="1">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div> <!-- end .table-responsive -->

                        </div> <!-- end .table-rep-plugin-->
                    </div> <!-- end .responsive-table-plugin-->
                </div> <!-- end card-box -->
            </div> <!-- end col -->
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>

    <script>
        const isDepotManager = {{ $isDepotManager ? 'true' : 'false' }};
        const isSuperDepotManager = {{ $isSuperDepotManager ? 'true' : 'false' }};
    </script>


    <script type="text/javascript">
        $(document).ready(function() {

                let state = "";
                let fromDate = "";
                let toDate = "";
                let status = "";
            
            const yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);

            const fromPicker = flatpickr('#fromDate', {
                altInput: true,
                altFormat: "d-m-Y",      
                dateFormat: "Y-m-d",     
                defaultDate: yesterday
            });

            const toPicker = flatpickr('#toDate', {
                altInput: true,
                altFormat: "d-m-Y",
                dateFormat: "Y-m-d",
                defaultDate: yesterday
            });

            $('.daterange-wrapper').hide()
            $('#period').change(function() {
                console.log($('#period').val())
                if ($('#period').val() == 'custom-date') {
                    $('.daterange-wrapper').show()
                } else {
                    $('.daterange-wrapper').hide()
                    let dateval = $('#period').val().split('~')
                    $('#startdate').val(dateval[0])
                    $('#enddate').val(dateval[1])
                }
            })


            $('#dash-daterange').flatpickr({
                altInput: true,
                mode: "range",
                altFormat: "Y-m-d",
                defaultDate: 'today'
            });

            // let startdate = new Date()
            // startdate.setMonth(startdate.getMonth() - 1)
            // $('#startdate').flatpickr({
            //     altFormat: "Y-m-d",
            //     defaultDate: startdate
            // });

            // $('#enddate').flatpickr({
            //     altFormat: "Y-m-d",
            //     defaultDate: 'today'
            // });

            let isfetch = false
            $('#btn-fetch').click(function() {
                table.ajax.url('/neblogisticreport/ajaxlist?startdate=' + $('#startdate').val() +
                    '&enddate=' + $('#enddate').val()).load();
                isfetch = true
            })

            $('#btn-export').click(function() {
                if (isfetch) {
                    document.location.href = '/neblogisticreport/export?startdate=' + $('#startdate')
                        .val() + '&enddate=' + $('#enddate').val()
                } else {
                    document.location.href = '/neblogisticreport/export'
                }

            })

            $('#btn-export-old').click(function() {
                if (isfetch) {
                    document.location.href = '/neblogisticreport/exportold?startdate=' + $('#startdate')
                        .val() + '&enddate=' + $('#enddate').val()
                } else {
                    document.location.href = '/neblogisticreport/exportold'
                }

            })

            let table = $('#basic-datatable').DataTable({
                "order": [
                    [0, "desc"]
                ],
                "language": {
                    "paginate": {
                        "previous": "<i class='mdi mdi-chevron-left'>",
                        "next": "<i class='mdi mdi-chevron-right'>"
                    }
                },
                "drawCallback": function drawCallback() {
                    //$('.dataTables_paginate > .pagination').addStaff('pagination-rounded');
                },

                fixedHeader: true,
                "pageLength": 200,
                "lengthMenu": [
                    [200, 350, 500, 750, 900],
                    [200, 350, 500, 750, 900]
                ],
                'processing': true,
                'serverSide': true,
                'serverMethod': 'get',
                searchDelay: 2000,
                "order": [
                    [1, "asc"]
                ],
                'searching': true,
                'info': true,

                "ajax": {
                    url: '/neblogisticreport/ajaxlist',
                    data: function(d) {
                        //'listfilters': listfilters
                        d.state = $('#depotStateFilter').val();
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                        d.status = $('#nebstatusFilter').val();
                    },
                    dataSrc: 'data'
                },
                columns: [
                    {
                        "data": "id"
                    },
                    {
                        "data": "emp_id"
                    },
                    {
                        "data": "emp_name"
                    },
                    {
                        "data": "team"
                    },
                    {
                        "data": "depot_name"
                    },
                    {
                        "data": "doctor_name"
                    },
                    {
                        "data": "msl_code"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "created_at",
                        "render": function (data, type, row) {
                            if (!data) return '';
                            const date = new Date(data);
                            const day = String(date.getDate()).padStart(2, '0');
                            const month = String(date.getMonth() + 1).padStart(2, '0');
                            const year = date.getFullYear();
                            return `${day}-${month}-${year}`;
                        }
                    },
                    {
                    data: null,
                    render: function(data, type, row) {

                        let editBtn = '';
                        if (!isDepotManager && !isSuperDepotManager) {
                            editBtn = '<a href="/neblogisticreport/viewreportbyid?id=' + row.id +
                                '&requesttype=edit' +
                                '&state=' + encodeURIComponent(state) +
                                '&from_date=' + encodeURIComponent(fromDate) +
                                '&to_date=' + encodeURIComponent(toDate) +
                                '&status=' + encodeURIComponent(status) +
                                '" title="Edit" class="btn btn-warning btn-xs waves-effect waves-light">' +
                                '<i class="mdi mdi-square-edit-outline"></i></a>';
                        }

                        let viewBtn = '<a href="/neblogisticreport/viewreportbyid?id=' + row.id +
                            '&requesttype=view' +
                            '&state=' + encodeURIComponent(state) +
                            '&from_date=' + encodeURIComponent(fromDate) +
                            '&to_date=' + encodeURIComponent(toDate) +
                            '&status=' + encodeURIComponent(status) +
                            '" title="View" class="btn btn-info btn-xs waves-effect waves-light">' +
                            '<i class="mdi mdi-eye-outline"></i></a>';

                        return editBtn + ' ' + viewBtn;
                    }
                }


                ],
                "initComplete": function(settings, json) {
                    var api = this.api();
                    var textBox = $('.dataTables_filter label input');
                    textBox.unbind();
                    textBox.bind('keyup input', function(e) {
                        if (e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox
                            .val()) {
                            // do nothing ¯\_(ツ)_/¯
                        } else if (e.keyCode == 13 || !textBox.val()) {
                            api.search(this.value).draw();
                        }
                    });
                }
            }); //Buttons examples

            

            $('#applyFilter').on('click', function() {
                table.draw();
                 state = $('#depotStateFilter').val();
                 fromDate = $('#fromDate').val();
                 toDate = $('#toDate').val();
                 status = $('#nebstatusFilter').val();
                let exportUrl =
                    `/neblogisticreport/export?state=${encodeURIComponent(state)}&from_date=${fromDate}&to_date=${toDate}&status=${status}`;
                $('#btn-export').attr('href', exportUrl);

                let exportUrlForOld =
                    `/neblogisticreport/exportold?state=${encodeURIComponent(state)}&from_date=${fromDate}&to_date=${toDate}&status=${status}`;
                $('#btn-export-old').attr('href', exportUrlForOld);
            });
        });
    </script>
@endsection