@extends('layouts/contentLayoutMaster')

@section('title', 'Patient List')

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap4.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap4.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap4.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-user.css')) }}">
    <style>
        .web{
            background: red;
            padding: 4px;
            border-radius: 10px;
            font-weight: bold;
            color: #fff;
        }
        .app{
            background: yellow;
            padding: 4px;
            border-radius: 15px;
            font-weight: bold;
            color: #fff;
        }

    </style>
@endsection

@section('content')
    <!-- users list start -->
    <section class="app-user-list">

        <!-- list section start -->
        <div class="card">
            <div class="card-datatable table-responsive pt-0">

                <table class="user-list-table table">
                    <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Martial Status</th>
                        <th>Date Of birth</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Major</th>
                        <th>Source</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- Modal to add new user starts-->

            <!-- Modal to add new user Ends-->
        </div>
        <!-- list section end -->
    </section>
    <!-- users list ends -->


    <div
        class="toast toast-basic hide position-fixed"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-delay="5000"
        style="top: 1rem; right: 1rem"
    >
        <div class="toast-header">
            <img src="{{asset('images/logo/logo.png')}}" class="mr-1" alt="Toast image" height="18" width="25" />
            <strong class="mr-auto">Soal Admin</strong>
            <small class="text-muted">Just Now</small>
            <button type="button" class="ml-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message. Hope you're doing well.. :)</div>
    </div>

@endsection

@section('vendor-script')
    {{-- Vendor js files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.bootstrap4.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection

@section('page-script')

    <script>


        $(function () {
            var table = $('.user-list-table').DataTable({
                order: [[0, 'desc']],
                processing: true,
                serverSide: true,
                ajax: "{{ url('patients') }}",
                dom:
                    '<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
                    '<"col-lg-12 col-xl-6" l>' +
                    '<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
                    '>t' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                language: {
                    sLengthMenu: 'Show _MENU_',
                    search: 'Search',
                    searchPlaceholder: 'Search..'
                },
                buttons: [
                    {
                        text: 'Add New Patients',
                        className: 'add_patients btn btn-primary mt-50',
                        attr: {
                            'href': 'patients/create',

                        },
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    }
                ],
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'full_name', name: 'full_name',orderable: true, searchable: true},
                    {data: 'gender', name: 'gender',orderable: true, searchable: true},
                    {data: 'martial_status', name: 'martial_status'},
                    {data: 'date_of_birth', name: 'date_of_birth'},
                    {data: 'email', name: 'email',orderable: true, searchable: true},
                    {data: 'phone_number', name: 'phone_number', orderable: true, searchable: true},
                    {data: 'major', name: 'major'},
                    {data: 'type', name: 'Source'},
                    {
                        data: 'action',
                        name: 'action',
                        orderable: true,
                        searchable: true
                    },
                ]
            });
        });


        $(document).on('click','.add_patients',function (){
            window.location = $(this).attr('href');
        });


    </script>

@endsection