@extends('member-new')
@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.area_mapping')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{{$alias}}/area-mapping">{{trans('master/master.area_mapping_master')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('master/master.view_area_mapping_record')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <!-- Statistics Card -->
        <div class="col-xl-12 col-md-12 col-12">
            <div class="card card-statistics">
                <div class="card-header pb-0">
                    <h4 class="card-title">{{trans('master/master.area_mapping_record')}}</h4>
                </div>
                <div class="card-body statistics-body">
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="mb-2">
                                <h4 class="p-1 text-center"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                    {{trans('master/master.view_area_mapping_record')}}</h4>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="row">
                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.name')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>{{ ucfirst($areaMapping->area->name) }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.parent_area')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>{{ ucfirst($areaMapping->area->parentArea->name) }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.location')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>{{ ucfirst($areaMapping->area->location->name) }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.sub_location')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p> {{ ucfirst($areaMapping->area->sublocations->name) }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.valid_from')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>{{ date('d M Y', strtotime($areaMapping->from_date)) }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.valid_to')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>{{ date('d M Y', strtotime($areaMapping->to_date)) }}</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="row">
                                <div class="col-md-4 col-4">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.shift_name')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-8">
                                    <div class="mb-1">
                                        <p> @if($areaMapping->shift)
                                            {{ ucfirst($areaMapping->shift->name) }}
                                            @endif</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-4">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.shift_start_time')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-8">
                                    <div class="mb-1">
                                        <p>@if($areaMapping->shift)
                                            {{ ucfirst($areaMapping->shift->start_time) }}
                                            @endif</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.shift_end_time')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p> @if($areaMapping->shift)
                                            {{ ucfirst($areaMapping->shift->end_time) }}
                                            @endif</p>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.status')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <span
                                            class="badge @if($areaMapping->status == 'inactive') badge-light-danger @else badge-light-success @endif rounded-pill ms-auto me-1">{{ ucfirst($areaMapping->status) }}</span>
                                    </div>
                                </div>

                                <div class="col-md-4 col-5">
                                    <div class="mb-1">
                                        <h6>{{trans('master/master.created_by')}}:</h6>
                                    </div>
                                </div>
                                <div class="col-md-8 col-7">
                                    <div class="mb-1">
                                        <p>  {{ ucfirst($createdBy->name) }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mt-0 mt-sm-4">
                            <div class="dt-bootstrap5 no-footer">
                                <table class="datatables-basic-dt table dataTable no-footer dtr-column"
                                     role="grid"
                                    style="width: 1038px;" id="organization">
                                    <thead>
                                        <th>ID</th>
                                        <th>Employee Name</th>
                                        <th>Employee Code</th>
                                        <th>Employee Type</th>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>

</section>


@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })
        $(document).ready(function() {
            var dt_filter_table = $('.datatables-basic-dt'); 

            if (dt_filter_table.length) {
                var dt_filter = dt_filter_table.DataTable({
                ajax: {
                    "url": "{{ route('area-member-view',['slug'=>$alias,'id'=>$areaId]) }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        _token: "{{csrf_token()}}"
                    }
                },
                "columns": [{
                    "data": "id",
                    render: function(data, type, row, meta) {
                        return ($('#organization').DataTable().page.info().page*$('#organization').DataTable().page.info().length)+(meta.row + 1);
                    }
                }, {
                    "data": "name"
                }, {
                    "data": "employee_code",
                }, {
                    "data": "employee_type",
                    "class": "text-capitalize",
                }],
                dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                orderCellsTop: true,
                language: {
                    paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;'
                    }
                },
                
                
                buttons: [{
                    extend: 'collection',
                    className: 'btn btn-outline-secondary dropdown-toggle me-2',
                    text: feather.icons['share'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.export')}}",
                    buttons: [
                        {
                            extend: 'print',
                            filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['printer'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.print')}}",
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#organization th").length).keys()) },
                        },
                        {
                            extend: 'csv',
                            filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['file-text'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.csv')}}",
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#organization th").length).keys()) },
                        },
                        {
                            extend: 'excel',
                            filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['file'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.excel')}}",
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#organization th").length).keys()) },
                        },
                        {
                            extend: 'pdf',
                            filename: '{{ date("d-m-Y H-i-s") }}',
                            title: '{{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.pdf')}}",
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#organization th").length).keys()) },
                                customize: function(doc) {
                                    doc['footer']=(function() {
                                        return {
                                            columns: [
                                                {
                                                    alignment: 'center',
                                                    text: ['Downloaded by: ', { text: '{{Auth::user()->name}}' }, ' on {{ date("d-m-Y") }} at {{ date("g:i A") }}']
                                                }
                                            ],
                                            margin: 10
                                        }
                                    }); 
                                },
                            },
                        {
                            extend: 'copy',
                            filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['copy'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.copy')}}",
                            className: 'dropdown-item',
                            exportOptions: { columns: Array.from(Array($("#organization th").length).keys()) }
                        }
                    ],
                    init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                        $(node).parent().removeClass('btn-group');
                        setTimeout(function () {
                        $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                        }, 50);
                    }
                    }
                ],
            
            });
            }

            $('div.head-label').html('<h6 class="mb-0">{{trans("master/master.employees")}}</h6>');
        });
        
    </script>

<!-- END: Page JS-->
@endpush