@extends('master')

@section('content')

<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3>{{__('Add Office Shift')}}</h3>
                    </div>
                    <div class="card-body">

                        <form method="post" id="sample_form" class="form-horizontal">

                            @csrf
                            <div class="row">

                                <div class="col-md-6 fv-row mb-5">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Company')}}</label>
                                    <select name="company_id" id="company_id" data-dropdown-parent="#sample_form" class="form-select form-select-solid dynamic" data-control="select2" data-dependent="department_name" data-placeholder="{{__('Selecting',['key'=>trans('Company')])}}">
                                        <option value="">Select Company</option>
                                        @foreach($companies as $company)
                                        <option value="{{$company->id}}">{{$company->company_name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="required fs-5 fw-bold mb-2">{{trans('Shift')}}</label>
                                        <input type="text" name="shift_name" id="shift_name" class="form-control form-control-solid" placeholder="shift name">
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Monday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="monday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="monday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Tuesday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="tuesday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="tuesday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Wednesday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="wednesday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="wednesday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Thursday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="thursday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="thursday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Friday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="friday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="friday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Saturday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="saturday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="saturday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-6 mb-2">
                                    <label class="fs-5 fw-bold mb-2">{{trans('Sunday')}}</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" name="sunday_in" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('In Time')}}">
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" name="sunday_out" id="timePicker" class="form-control form-control-solid time " value="" placeholder="{{__('Out Time')}}">

                                        </div>
                                    </div>
                                </div>

                                <span id="form_result"></span>

                                <div class="col-md-6 offset-md-3 mt-3">
                                    <div class="form-group" align="center">
                                        <input type="hidden" name="action" id="action" />
                                        <input type="hidden" name="hidden_id" id="hidden_id" />
                                        <input type="submit" name="action_button" id="action_button" class="btn btn-primary btn-block" value={{trans('SUBMIT')}} />
                                    </div>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


@endsection

@section('page_script')
<script nonce="{{ $cspNonce }}">

    (function($) {
        "use strict";
        $(document).ready(function () {
        flatpickr("#timePicker", {
        enableTime: true,       // Enable time selection
        noCalendar: true,       // Disable calendar
        dateFormat: "H:i",      // Set time format (24-hour clock)
        time_12hr: true         // Use 24-hour clock format
        })});

        $('#sample_form').on('submit', function (event) {
            event.preventDefault();
         
                $.ajax({
                    url: "{{ route('office_shift.store') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        var html = '';
                        if (data.errors) {
                            html = '<div class="alert alert-danger">';
                            for (var count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if (data.success) {
                            toastr.success(data.success, "Success!");
                            $('#sample_form')[0].reset();
                        }
                        $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    }
                })
        });

    })(jQuery);
</script>
@endsection