@extends('layouts.master', [
    'title' => __('app.gate_check_in') . ' - ' . __('app.worker'),
    'icon_back' => true,
    'url' => route('gate-in.employee'),
])
@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/themes/default/style.min.css")}}">
@endpush

@push("styles")
<style>
    a.jstree-anchor.jstree-clicked {
        background: #ebebeb;
    }

    .dropdown-tree {
        position: relative;
    }

    .dropdown-tree input {
        width: 100%;
        padding: 0.5rem;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
    }

    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 300px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        display: none;
        z-index: 1000;
    }

    .dropdown-tree.open .dropdown-content {
        display: block;
    }
    .datetimepicker.is-active {
        z-index: 22 !important;
    }
    .datetimepicker .datepicker-nav {
        background: #E89417;
    }

    .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day {
        color: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {
        background: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {
        background-color: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item {
        border: .1rem solid #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
        border: .1rem dotted #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
        border: .1rem dotted #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active {
        background: #E89417 !important;
        border-color: #E89417 !important;
    }

    .datetimepicker-dummy:before {
        content: "" !important;
        color: #E89417 !important;
    }

    .is-hidden {
        display: inline-table !important;
        margin-top: -1px;
    }

    .datetimepicker-dummy-input{
        display: none !important;
    }

    #duty_period-error{
        margin-top: 40px;
    }


</style>
@endpush

@section('content')
    @php 
        $sqlNumber = DB::table('number_of_days')
        ->where('id', '=', 1)
        ->first();
    @endphp

    <div class="page-content-inner">
        <form id="form_gate_check_in">
            <div class="demo-card p-6">
                <div class="demo-title">
                    <div class="fs-16 fw-600 text-dark">@lang('app.gate_check_in')</div>
                </div>
                <div class="card-inner">
                    <div class="columns is-multiline">
                        <div class="column is-6">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="location">
                                    {{ __('app.location') }}<sup class="text-danger">*</sup>
                                </label>
                                <div class="dropdown-tree" id="treeSelect">
                                    <input type="text" class="input" name="location" id="location" readonly placeholder="Select location..." style="background-color: #fff;" />
                                    <div class="dropdown-content" id="treeContainer"></div>
                                </div>
                                <input type="hidden" name="location_ids" id="location_ids" />
                            </div>
                        </div>
                        <div class="column is-6">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="duty_period">
                                    Duty Period (maximum {{$sqlNumber->number ?? 28 }} days.)<sup class="text-danger">*</sup>
                                </label>

                                <div class="control has-icon">
                                    <input id="duty_period" name="duty_period" class="input" type="date" autocomplete="off" data-is-range="true" placeholder="DD/MM/YYYY - DD/MM/YYYY">
                                    {{-- <input id="duty_period2" name="duty_period2" class="input contract-period"
                                        placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off"
                                        data-min-date="" data-max-date="" required />
                                    <div class="form-icon">
                                        <i class="lnil lnil-calendar"></i>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                        <div class="column is-12">
                            <div class="datatable-toolbar">
                                <div class="field has-addons">
                                    <div class="left">
                                        <div class="control has-icon mr-3">
                                            <input type="text" style="width: 260px" placeholder="Enter name or username"
                                                id="search_checkin_employee" class="datatable-filter input">
                                            <div class="form-icon">
                                                <i data-feather="search"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div class="control">
                                            <div class="dropdown dropdown-trigger is-right" id="filter_checkin_employee">
                                                <div class="is-trigger">
                                                    <button type="button" class="button" aria-haspopup="true">
                                                        <span class="icon">
                                                            <i data-feather="filter"></i>
                                                        </span>
                                                        <span>@lang('app.filter')</span>
                                                    </button>
                                                </div>
                                                <div class="dropdown-menu" role="menu">
                                                    @include('components.modal.modal-filter', [
                                                        'filter' => 'checkin_employee',
                                                    ])
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-wrapper">
                                <table id="table_checkin_employee"
                                    class="table is-datatable is-hoverable table-is-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 20px" class="has-text-centered">@lang('app.nomor')</th>
                                            <th style="max-width: 60px" class="has-text-centered"> @lang('app.choose_worker')</th>
                                            <th class="has-text-centered">
                                                <div class="table-sortable">
                                                    <span>@lang('app.name')</span>
                                                    <span class="icon-sort">
                                                        @include('components.icons.cevron-up-small', [
                                                            'field' => 'name',
                                                        ])
                                                        @include('components.icons.cevron-down-small', [
                                                            'field' => 'name',
                                                        ])
                                                    </span>
                                                </div>
                                            </th>
                                            <th class="has-text-centered">@lang('app.username')</th>
                                            <th class="has-text-centered">@lang('app.role')</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div id="pagination_checkin_employee"></div>
                        </div>
                    </div>
                </div>
            </div>
            @include('components.button.card-button-submit', [
                'form_id' => 'form_gate_check_in',
                'btn_submit_id' => 'btn_submit_check_in',
                'url_back' => route('gate-in.employee'),
            ])
        </form>
    </div>

    <div id="container_modal_alert"></div>
@endsection

@push('scripts')
    <script src="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/jstree.min.js") }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        const urlStoreGateIn = '{{ route('gate-in.store') }}'
        const urlDatatableEmployeeCheckin = '{{ route('gate-in.datatable-employee-checkin') }}'
        const maximumDays = '{{$sqlNumber->number ?? 28 }}';
    </script>
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/gate-in/create.js') }}"></script>
    <script src="{{ asset('assets/js/utils/utils.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>
    @php 
        $sqlNumber = DB::table('number_of_days')
        ->where('id', '=', 1)
        ->first();
    @endphp
    <script>
        function daterangeDutyPeriod() {
            $(document).on('focus', '.contract-period', function() {
                if (!$(this).hasClass('daterangepicker-initialized')) {
                    let start = moment();
                    let end = moment().add(5, 'days');

                    $(this).daterangepicker({
                        autoUpdateInput: false,
                        singleDatePicker: false,
                        showDropdowns: true,
                        minDate: start,
                        maxDate: moment().add('{{$sqlNumber->number ?? 28 }}', 'days'),
                        startDate: start,
                        endDate: end,
                        locale: {
                            format: 'DD/MM/YYYY',
                            applyLabel: "Apply",
                            cancelLabel: "Clear"
                        }
                    }).addClass('daterangepicker-initialized');

                    $(this).on('apply.daterangepicker', function(ev, picker) {
                        const startDate = picker.startDate;
                        const endDate = picker.endDate;

                        $(this).val(
                            startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY')
                        );
                    });

                    $(this).on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                    });
                }
            });
        }

        $(document).ready(function() {
            daterangeDutyPeriod()
        });
    </script>
    <script>
    // toggle dropdown on input click
    $('#treeSelect input').on('click', function () {
        $('#treeSelect').toggleClass('open');
    });

    // close dropdown if clicked outside
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#treeSelect').length) {
            $('#treeSelect').removeClass('open');
        }
    });

    // update input text on selection change
    $('#treeContainer').on('changed.jstree', function (e, data) {
        const selectedText = data.selected.map(id => data.instance.get_node(id).text).join(', ');
        $('#treeSelect input').val(selectedText);
        const selectedIds = data.selected;
        $("#location_ids").val(selectedIds.join(','));
    });

    </script>
    <script>
        const locations = @json($locations);

        function buildTreeFormat(items) {
            return items.map(item => ({
                id: String(item.id),
                text: item.name,
                parent: item.parent_id ? String(item.parent_id) : "#",
                icon: false
            }));
        }

        const listLocation = buildTreeFormat(locations);

        // Example: init jsTree
        $('#treeContainer').jstree({
            core: { data: listLocation },
            plugins: ['checkbox'],
            checkbox: {
                cascade: 'up+down+undetermined'
            }
        });


        bulmaCalendar.attach('#duty_period', {
            lang: 'en',
            // displayMode: 'dialog',
            color: themeColors.primary,
            dateFormat: 'DD/MM/YYYY',
            minDate: new Date()

        });

    </script>
@endpush