@extends('layouts.vertical', ['page_title' => 'Neb Mitra Doctors'])

@section('css')
    <link href="{{ asset('assets/libs/datatables/datatables.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;
        }
        .table-responsive {
            overflow-x: auto;
        }
    </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 }}</h4>
            </div>
            <div class="col-md-6 p-2 text-end">
                <a href="/nebmitra/doctorsexport" class="btn btn-dark waves-effect waves-light me-2" id="btn-export">
                    Export
                </a>
            </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="table-responsive">
                        <table id="doctors-datatable" class="table table-bordered table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Legacy Code</th>
                                    <th>Doctor Name</th>
                                    <th>Mobile Number</th>
                                    <th>Location</th>
                                    <th>State</th>
                                    <th>Type</th>
                                    <th>Date Added</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            let table = $('#doctors-datatable').DataTable({
                "responsive": true,
                "scrollX": true,
                "order": [[0, "desc"]],
                "language": {
                    "paginate": {
                        "previous": "<i class='mdi mdi-chevron-left'>",
                        "next": "<i class='mdi mdi-chevron-right'>"
                    }
                },
                "drawCallback": function() {
                    $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
                },
                fixedHeader: true,
                "pageLength": 50,
                "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
                'processing': true,
                'serverSide': true,
                'serverMethod': 'get',
                searchDelay: 2000,
                'searching': true,
                'info': true,
                "ajax": {
                    url: '/nebmitra/doctorsajax',
                    dataSrc: 'data'
                },
                columns: [
                    { "data": "id" },
                    { "data": "legacy_code" },
                    { "data": "doctor_name" },
                    { "data": "mobile_number" },
                    { "data": "location" },
                    { "data": "state" },
                    { "data": "type" },
                    { 
                        "data": "date_added",
                        "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}`;
                        }
                    }
                ],
                "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();
                        }
                    });
                }
            });
        });
    </script>
@endsection