{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{ $page_title }}
@endsection
@section('styles')
<link href="{{asset('backend/plugins/custom/multiselect/css/multi-select.css')}}" media="screen" rel="stylesheet" type="text/css">
<style>
    .ms-container {
        width: 100%;
    }
</style>
@endsection 
{{-- Content --}}
@section('content')

<form class="form" method="post" action="{{ $action }}" id="manage_form" enctype="multipart/form-data">
    @if (!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <input type="hidden" name="submit_action" id="submit_action" value="">
    <input type="hidden" name="is_mobile" value="{{!empty($isMobile) && $isMobile == true?1:''}}" id="">
    <input type="hidden" name="token" value="{{$token??''}}" id="">
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Card body-->
        <div class="card-body">
            <div id="custom-loader" style="display: table !important;">
                <div class="overlay"></div>
                <div class="loader"></div>
            </div>
            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                    @include('backend.errors')
                    <!--begin::Row-->
                    <div class="row">
                        <div class="col-xl-2"></div>
                        <div class="col-xl-12 my-2">
                            {!! Helper::getClientManageDropDown([
                            'selectedClientId' => $client_id ?? '',
                            'isRequired' => true,
                            'divClass' => 'form-group row mb-7',
                            'inputDivClass' => 'col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12',
                            'isDisabled' => $isDisabled,
                            'name' => 'participant_id',
                            ]) !!}
                            <div class="form-group row mb-5">
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Month:</label>
                                    <select class="form-control form-control-solid required input-month form-select" {{ $isDisabled }} name="month">
                                        <option value="">Select Month </option>
                                        @foreach ($monthList as $code => $name)
                                        <option value="{{ $code }}" {{ $month == $code ? 'selected' : '' }}>{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    @if ($isDisabled)
                                    <input type="hidden" name="month" value="{{ $month }}" />
                                    @endif
                                </div>
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Year:</label>
                                    <select class="form-control form-control-solid required input-year form-select" name="year" {{ $isDisabled }}>
                                        <option value="">Select Year </option>
                                        @foreach ($yearList as $code => $name)
                                        <option value="{{ $name }}" {{ $year == $name ? 'selected' : '' }}>{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    @if ($isDisabled)
                                    <input type="hidden" name="year" value="{{ $year }}" />
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                    <!-- Week Start Section - Initially hidden for create mode -->
                    <div class="row week-start-section {{ (!empty($year) && !empty($month)) || $isDisabled ? '' : 'd-none' }}">
                        <div class="col-xl-2"></div>
                        <div class="col-xl-12 my-2">
                            <div class="form-group row mb-5">
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12  mb-5">
                                    <label>Week Start Date:</label>
                                    <select class="form-control form-control-solid input-weekstart form-select" {{ $isDisabled }} name="week_start_date" value="{{ $data['week_start_date'] ?? '' }}">
                                        <option value="">Select Week Date </option>
                                        @foreach ($week_start as $code => $weekid)
                                        <option value="{{ $weekid }}" {{ $weekDate == $weekid ? 'selected' : '' }}>{{ $code }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @if ($isDisabled)
                                    <input type="hidden" name="week_start_date" value="{{ $data['week_start_date'] ?? '' }}" />
                                    @endif
                                    <small class="week-start-date-warning-text text-danger d-none">Please select Week Start Date to proceed</small>
                                </div>
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Week End Date:</label>
                                    <input class="form-control form-control-lg form-control-solid input-weekend" type="text" name="week_end_date" value="{{ $weekEndDate ?? '' }}" readonly />
                                </div>
                                <!--begin::Group-->
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Save as</label>
                                    <select class="form-control form-control-lg form-control-solid form-select" name="save_as" id="save_as_input">
                                        @foreach ($save_list as $id => $title)
                                        <option value="{{ $id }}" {{ isset($data['save_as']) && $data['save_as'] == $id ? 'selected' : '' }}>{{ $title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!--end::Group -->
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                    @if (!empty($year) && !empty($month) && !empty($weekDate))
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-sm btn-light-primary me-2" id="expandAllBtn">
                            <i class="la la-plus"></i> Expand All
                        </button>
                        <button type="button" class="btn btn-sm btn-light-danger" id="collapseAllBtn">
                            <i class="la la-minus"></i> Collapse All
                        </button>
                    </div>
                    @endif
                </div>
            </div>
            <!--end::Tab-->
        </div>
    </div>
    <!--end::Card-->
    <br />
    @if (!empty($client_id) && !empty($year) && !empty($month) && !empty($weekDate))
    <div id="rosterSection">
        @include('backend.roster_management_v2.date_and_shift_accordion')

        <br />
        <div class="card shadow-sm">
            <!--begin::Card body-->
            <div class="card-footer text-right">
                @if(!empty($data['id']))
                <button type="button" class="btn btn-primary me-2 btn-hover-rise btn-submit" data-type="save_and_continue" onclick="document.getElementById('submit_action').value='save_and_continue'; submitRosterForm($('#manage_form'));">Save & Continue</button>
                @endif
                <button type="button" class="btn btn-primary me-2 btn-hover-rise btn-submit" data-type="submit" onclick="document.getElementById('submit_action').value='submit'; submitRosterForm($('#manage_form'));">Submit</button>
                @if (!empty($isMobile) && $isMobile == true)
                    <button type="button" class="btn btn-secondary btn-hover-rise" onclick="cancelPostMessage();">Cancel</button>
                @else
                    <a href="{{ route('team_roster.index') }}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
                @endif
                
            </div>
        </div>
        <!--end::Card-->
    </div>
    @endif

    <input type="hidden" name="form_complete" value="1">
    <input type="hidden" name="case_note_sync_json" id="case_note_sync_json_input" value="[]" autocomplete="off">
</form>

@include('backend.roster_management_v2.modals')

<!-- Hidden Template -->
<template id="staff-template">
    <div class="card card-flush border mb-3 p-8 shadow-sm staff-block" data-date="__DATE__" data-shift="__SHIFT__">
        <input class="hidden_allocation_id" type="hidden" name="allocations[__DATE__][__SHIFT__][__INDEX__][id]" value="">

        <div class="row g-3 align-items-end">
                @if($is_core_shift_permitted ?? false)
                <!-- Core Shift Checkbox -->
                <div class="form-check form-check-sm form-check-custom ms-1 mt-2">
                    <input type="hidden" name="allocations[__DATE__][__SHIFT__][__INDEX__][core_shift]" value="0">
                    <input type="checkbox" class="form-check-input core-shift-checkbox" name="allocations[__DATE__][__SHIFT__][__INDEX__][core_shift]" value="1">
                    <label class="form-check-label">Core Shift</label>
                </div>
                @endif
            <div class="col-md-2">
                <label class="form-label fw-bold">Staff</label>
                <select class="form-control form-control-lg form-control-solid form-select staff-field" name="allocations[__DATE__][__SHIFT__][__INDEX__][staff_id]">
                    <option value="">Select Staff</option>

                    @foreach ($staff_list ?? [] as $s)
                    <option value="{{ $s['id'] }}" data-total-contract-hours="{{ $s['total_contract_hours'] ?? 0 }}">{{ $s['user_full_name'] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">Start Time</label>
                <select class="form-control form-control-lg form-control-solid form-select required" name="allocations[__DATE__][__SHIFT__][__INDEX__][start_time]">
                    <option value="">Select Time</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">End Time</label>
                <select class="form-control form-control-lg form-control-solid form-select required" name="allocations[__DATE__][__SHIFT__][__INDEX__][end_time]">
                    <option value="">Select Time</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-bold">Break (HH:MM)</label>
                <div class="input-group">
                    <input class="form-control form-control-lg form-control-solid" type="number" min="0" max="23" class="form-control" name="allocations[__DATE__][__SHIFT__][__INDEX__][break_hours]" value="0">
                    <span class="input-group-text">:</span>
                    <input class="form-control form-control-lg form-control-solid" type="number" min="0" max="45" step="15" class="form-control" name="allocations[__DATE__][__SHIFT__][__INDEX__][break_minutes]" value="0">
                </div>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">Cover Staff</label>
                <select class="form-control form-control-lg form-control-solid form-select" name="allocations[__DATE__][__SHIFT__][__INDEX__][cover_staff_id]">
                    <option value="">Select Staff</option>
                    @foreach ($cover_staff_list ?? [] as $cs)
                    <option value="{{ $cs['id'] }}" data-total-contract-hours="{{ $cs['total_contract_hours'] ?? 0 }}">{{ $cs['user_full_name'] }}</option>
                    @endforeach
                </select>
            </div>


            <div class="col-md-2">
                <label class="form-label fw-bold">Total Hours</label>
                <input type="text"
                    class="form-control form-control-solid form-control-lg total-hours-field"
                    value=""
                    min="0" disabled>
            </div>
            @if (!empty($shared_clients))
            <div class="row g-3 mt-3 shared-clients-block">
                <div class="col-12">
                    <div class="small text-muted mb-2 shared-client-label">Shared Client Hours (0)</div>
                </div>

                @foreach ($shared_clients as $scId => $scName)
                <div class="col-md-2">
                    <label class="form-label fw-bold">{{ $scName }}</label>
                    <input type="number" class="form-control form-control-solid form-control-sm required" name="allocations[__DATE__][__SHIFT__][__INDEX__][shared_client][{{ $scId }}]" value="0" min="0">
                </div>
                @endforeach
            </div>
            @endif

            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-sm btn-danger remove-staff-btn me-1">Remove</button>
                <button type="button" class="btn btn-sm btn-success copy-staff-btn">Copy</button>
            </div>
        </div>
    </div>
</template>


<!-- Hidden Template Open shift Model-->
<template id="open-shift-template">

    <div class="card card-flush border mb-3 p-8 shadow-sm staff-block" data-date="__DATE__" data-shift="__SHIFT__">
        <input class="hidden_allocation_id" type="hidden" name="allocations[__DATE__][__SHIFT__][__INDEX__][id]" value="">
        <input class="form-control" type="hidden" name="allocations[__DATE__][__SHIFT__][__INDEX__][cover_staff_id]" value="">


        <div class="row g-3 align-items-end">
            <div class="col-md-2">
                <label class="form-label fw-bold">Staff</label>
                <select class="form-control form-control-lg form-control-solid form-select staff-field" name="allocations[__DATE__][__SHIFT__][__INDEX__][staff_id]">
                    @foreach (config('constant.roster_shift_type') as $typeKey => $typeValue)
                    <option value="{{ $typeKey }}">{{ $typeValue }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">Start Time</label>
                <select class="form-control form-control-lg form-control-solid form-select required" name="allocations[__DATE__][__SHIFT__][__INDEX__][start_time]">
                    <option value="">Select Time</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">End Time</label>
                <select class="form-control form-control-lg form-control-solid form-select required" name="allocations[__DATE__][__SHIFT__][__INDEX__][end_time]">
                    <option value="">Select Time</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-bold">Break (HH:MM)</label>
                <div class="input-group">
                    <input class="form-control form-control-lg form-control-solid" type="number" min="0" max="23" class="form-control" name="allocations[__DATE__][__SHIFT__][__INDEX__][break_hours]" value="0">
                    <span class="input-group-text">:</span>
                    <input class="form-control form-control-lg form-control-solid" type="number" min="0" max="45" step="15" class="form-control" name="allocations[__DATE__][__SHIFT__][__INDEX__][break_minutes]" value="0">
                </div>
            </div>

            <!-- <div class="col-md-2">
                <label class="form-label fw-bold">Cover Staff</label>
                <select class="form-control form-control-lg form-control-solid form-select" name="allocations[__DATE__][__SHIFT__][__INDEX__][cover_staff_id]">
                    <option value="">Select Staff</option>
                    @foreach ($cover_staff_list ?? [] as $cs)
                    <option value="{{ $cs['id'] }}" data-total-contract-hours="{{ $cs['total_contract_hours'] ?? 0 }}">{{ $cs['user_full_name'] }}</option>
                    @endforeach
                </select>
            </div> -->

            <div class="col-md-2">
                <label class="form-label fw-bold">Total Hours</label>
                <input type="text"
                    class="form-control form-control-solid form-control-lg total-hours-field"
                    value=""
                    min="0" disabled>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-bold">Shift Manager</label>
                <select class="form-control form-control-lg form-control-solid form-select required" name="allocations[__DATE__][__SHIFT__][__INDEX__][shift_manager_id]"
                    disabled>
                    <option value="">Select Manager</option>
                    @foreach ($cover_managers_list ?? [] as $cm)
                    <option value="{{ $cm['id'] }}" data-total-contract-hours="{{ $cm['total_contract_hours'] ?? 0 }}"
                        {{ ($allManagers['shift_manager_id'] ?? null) == $cm['id'] || auth()->id() ==  $cm['id'] ? 'selected' : '' }}>
                        {{ $cm['user_full_name'] }}
                    </option>
                    @endforeach
                </select>
            </div>


            @if (!empty($shared_clients))
            <div class="row g-3 mt-3 shared-clients-block">
                <div class="col-12">
                    <div class="small text-muted mb-2 shared-client-label">Shared Client Hours (0)</div>
                </div>

                @foreach ($shared_clients as $scId => $scName)
                <div class="col-md-2">
                    <label class="form-label fw-bold">{{ $scName }}</label>
                    <input type="number" class="form-control form-control-solid form-control-sm required" name="allocations[__DATE__][__SHIFT__][__INDEX__][shared_client][{{ $scId }}]" value="0" min="0">
                </div>
                @endforeach
            </div>
            @endif

            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-sm btn-danger remove-staff-btn me-1">Remove</button>
                <!-- <button type="button" class="btn btn-sm btn-success copy-staff-btn">Copy</button> -->
            </div>
        </div>
        <br />


        <!--begin::Group-->
        <div class="form-group row mb-3">

            <div class="col-4">
                <a href="javascript:;"><button type="button" class="btn btn-primary mb-5 me-2" onclick="selectAll(this)">Select All</button></a>
                <a href="javascript:;"><button type="button" class="btn btn-secondary mb-5" onclick="deSelectAll(this)">Reset</button></a>
            </div>

            <div class="form-label">
                Note: Please select below Open Shift Users
            </div>
            <br>
            <br>
            <div class="col-xl-9 col-md-9 col-lg-9">
                <select class="form-control form-control-lg form-control-solid optgroup" style="height: 250px;" name="allocations[__DATE__][__SHIFT__][__INDEX__][user_id][]" multiple required>
                    @foreach($users_list ?? [] as $rname => $users)
                    <optgroup label='{{$rname}}'>
                        @foreach($users as $userId => $userName)
                        <option value='{{$userId}}'>{{$userName}}</option>
                        @endforeach
                    </optgroup>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</template>
@endsection

{{-- Scripts Section --}}
@section('scripts')
{{-- @include('backend.roster_management.shared_client_script') --}}

{{-- @include('backend.roster_management_v2.form_submission_script') --}}
<script src="{{ asset('backend/plugins/custom/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('backend/plugins/custom/multiselect/js/jquery.quicksearch.js') }}"></script>
<script>    
    function cancelPostMessage(){
        if (typeof AppBridge !== 'undefined' && AppBridge.postMessage) { AppBridge.postMessage(JSON.stringify({status: true})); }
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {

        initTimepicker();

        $('#custom-loader').hide();
        // This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
        // var card = new KTCard('kt_card_1');


        // Initialize tooltips on page load
        initTooltips();

        initMultiselect();

    });


    function initMultiselect() {
        $('.optgroup').multiSelect({
            selectableOptgroup: true,
            selectableHeader: "<input type='text' class='search-input form-control form-control-lg' autocomplete='off' placeholder='Search'>",
            selectionHeader: "<input type='text' class='search-input form-control form-control-lg' autocomplete='off' placeholder='Search'>",
            afterInit: function(ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keydown', function(e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        }
                    });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                    .on('keydown', function(e) {
                        if (e.which == 40) {
                            that.$selectionUl.focus();
                            return false;
                        }
                    });
            },
            afterSelect: function() {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function() {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
    }

    function selectAll(ele) {
        $(ele).parents('.form-group:first').find('.optgroup').multiSelect('select_all');
    }

    function deSelectAll(ele) {
        $(ele).parents('.form-group:first').find('.optgroup').multiSelect('deselect_all');
    }


    function initTimepicker() {
        $(".bt_timepicker_2").flatpickr({
            enableTime: true,
            noCalendar: true,
            enableSeconds: true,
            dateFormat: "H:i:S",
            minuteIncrement: 15
        });
    }

    // Initialize Bootstrap tooltips for help icons
    function initTooltips() {
        $('[data-bs-toggle="tooltip"]').each(function() {
            if (!$(this).data('bs.tooltip')) {
                new bootstrap.Tooltip(this);
            }
        });
    }
</script>
@include('backend.roster_management_v2.week_date_load_script')
<script>
    // ── SCHADS V2 Pre-Save Check Config ─────────────────────────────────────────
    var schadsIsV2      = {{ $is_v2 ? 'true' : 'false' }};
    var schadsCheckUrl  = "{{ $schads_check_url ?? '' }}";
    var schadsWeekId    = "{{ $weekDate ?? '' }}";
    var _csrfToken      = "{{ csrf_token() }}";
    // ────────────────────────────────────────────────────────────────────────────
</script>
@include('backend.roster_management_v2.additional_script')
@endsection