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

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <h3 class="card-label">{{$page_title}}</h3>
        </div>
        <div class="card-toolbar">
        </div>
    </div>

    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        <form class="form" method="post" action="{{$action}}" id="manage_form">
            @csrf
            @include("backend.alerts")
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Month:</label>
                            <select class="form-control form-control-solid required input-month" {{$isDisabled}} name="month" required>
                                <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-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Year:</label>
                            <select class="form-control form-control-solid required input-year" name="year" {{$isDisabled}} required>
                                <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-->

            @if(!empty($year) && !empty($month))
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Week Start Date:</label>
                            <select class="form-control form-control-solid input-weekstart required filter-date" {{$isDisabled}} name="fromDate" value="{{$data['weekstart']??''}}" required>
                                <option value="">Select Week Date </option>
                                @foreach($week_start as $code => $weekid)

                                <option value="{{$weekid}}" {{$weekDate==$weekid?'selected':''}}>{{$code}}</option>
                                @endforeach
                            </select>
                            <input type="hidden" class="input-from-date" value="{{$weekstart??''}}" />
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Week End Date:</label>
                            <input class="form-control form-control-lg form-control-solid required input-to-date filter-date" type="text" name="toDate" value="{{$weekEndDate??''}}" readonly />
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Row-->
            @endif

            <h3>Copy Roster To</h3>
            <br />
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Month:</label>
                            <select class="form-control form-control-solid required input-month-2" {{$isDisabled}} name="month2" required>
                                <option value="">Select Month </option>
                                @foreach($monthList as $code => $name)
                                <option value="{{$code}}" {{$month2 == $code ? "selected": ""}}>{{$name}}</option>
                                @endforeach
                            </select>
                            @if($isDisabled)
                            <input type="hidden" name="month2" value="{{$month2}}" />
                            @endif
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Year:</label>
                            <select class="form-control form-control-solid required input-year-2" name="year2" {{$isDisabled}} required>
                                <option value="">Select Year </option>
                                @foreach($yearList as $code => $name)
                                <option value="{{$name}}" {{$year2 == $name ? "selected": ""}}>{{$name}}</option>
                                @endforeach
                            </select>
                            @if($isDisabled)
                            <input type="hidden" name="year2" value="{{$year2}}" />
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Row-->

            @if(!empty($year) && !empty($month))
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Week Start Date:</label>
                            <select class="form-control form-control-solid input-weekstart-2 required filter-date" {{$isDisabled}} name="fromDate2" required>
                                <option value="">Select Week Date </option>
                                @foreach($week_start2 as $code => $weekid)
                                <option value="{{$weekid}}" {{$weekDate2==$weekid?'selected':''}}>{{$code}}</option>
                                @endforeach
                            </select>
                            <input type="hidden" class="input-from-date" value="{{$weekstart2??''}}" />
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Week End Date:</label>
                            <input class="form-control form-control-lg form-control-solid required input-to-date filter-date" type="text" name="toDate2" value="{{$weekEndDate2??''}}" readonly />
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Status:</label>
                            <select class="form-control form-control-lg form-control-solid" name="save_as" id="save_as_input" disabled>
                                @foreach($save_list as $id => $title)
                                <option value="{{$id}}" {{isset($save_as) && $save_as == $id ? "selected" : "" }}>{{$title}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-12 my-2">
                    <div class="form-group row">
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <label>Participants:</label>
                            @if(!empty($clients))
                            <select class="form-control form-control-solid required" name="client_id[]" id="client_id_dropdown" multiple required>
                                @foreach($clients as $id => $name)
                                <option value="{{$id}}">{{$name}}</option>
                                @endforeach
                            </select>
                            @else
                            <br />
                            <span class="form-label text-danger">No clients found with selected roster date.</span><br />
                            @endif
                            <span class="form-label text-muted">To select one or more client, press CTRL key and Click on the client name to select more than 1 client</span>
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Row-->
            @endif
        </form>
    </div>
    <!--end::Body-->

    <div class="card card-custom">
        <!--begin::Card body-->
        <div class="card-footer text-right">
            @if(!empty($clients))
            @if(false)
            <button type="button" class="btn btn-primary mr-2" id="submitBtn" onclick="submitSaveBtn()">Submit</button>
            @endif
            @endif
            <a href="{{route('roster_bulk_actions.bulk.bulk_copy_view')}}"><button type="button" class="btn btn-secondary">Cancel</button></a>
        </div>
    </div>

</div>
<!--end::Card-->
@endsection


{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
    $('#kt_header_menu_wrapper').attr('style', 'visibility:hidden;');
    $(document).on('change', '.input-month, .input-year, .input-weekstart', function() {
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var week = $('.input-weekstart').val() || "";
        var url = "{{route('roster_bulk_actions.bulk.bulk_copy_view')}}";
        url = url + "?year=" + year + "&month=" + month + "&week=" + week;

        var month2 = $('.input-month-2').val();
        var year2 = $('.input-year-2').val();
        var week2 = $('.input-weekstart-2').val() || "";
        url = url + "&year2=" + year2 + "&month2=" + month2 + "&week2=" + week2;

        window.location.href = url;
    });

    $(document).on('change', '.input-month-2, .input-year-2, .input-weekstart-2', function() {
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var week = $('.input-weekstart').val() || "";
        var url = "{{route('roster_bulk_actions.bulk.bulk_copy_view')}}";
        url = url + "?year=" + year + "&month=" + month + "&week=" + week;

        var month2 = $('.input-month-2').val();
        var year2 = $('.input-year-2').val();
        var week2 = $('.input-weekstart-2').val() || "";
        url = url + "&year2=" + year2 + "&month2=" + month2 + "&week2=" + week2;

        window.location.href = url;
    });

    function submitSaveBtn() {
        if ($('#manage_form').valid()) {
            Swal.fire({
                text: "Are you sure you want to copy bulk rosters of selected clients for selected date?",
                icon: "info",
                showCancelButton: true,
                buttonsStyling: true,
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                customClass: {
                    confirmButton: "btn font-weight-bold btn-primary",
                    cancelButton: "btn font-weight-bold btn-secondary"
                }
            }).then(function(result) {
                if (result.value && $('#manage_form').valid()) {
                    $('#submitBtn').attr('disabled', true);
                    $('#submitBtn').attr('Submitting...', true);
                    $('#manage_form').submit();
                }
            });
        }
    }
    $(document).ready(function() {
        // calculateTotal()
        $('#manage_form').validate({
            // ignore: [],
            invalidHandler: function(form, validator) {
                $('button[type="submit"]').removeAttr('disabled');
                var errors = validator.numberOfInvalids();
                if (errors && errors == 1) {
                    console.log(validator.errorList)
                }
            }
        });
    });
</script>
@endsection