@extends('backend.app')
@section('title',' Schedules')
@section('content')
<h2 class="ms-2 mb-3 card-title">{{__('messages.schedules') ." ". __('messages.list')}}</h2>
{{-- <h2 class="ms-2 mb-3 card-title">Employee's Working Schedule List</h2> --}}
    <div class="card  mt-3 m-lg-2">
        <div class="card-body table_card  mt-2">
            @can('schedule.create')
                <div class="add-new-button-hidden">
                    <button class="btn add_new_btn" data-bs-toggle="modal" data-bs-target="#schedule_add_modal"
                            ><i class="plus-ico"></i> {{__('messages.add') ." ". __('messages.schedules')}}
                    </button>
                </div>
            @endcan
            <table id="myTable" class="table table-bordered dt-responsive nowrap w-100">
                <thead>
                <tr>
                    <th>{{__('messages.sl') }}</th>
                    <th>{{__('messages.duty_shift') }}</th>
                    <th>{{__('messages.in_time')}}</th>
                    <th>{{__('messages.description') }}</th>
                    <th>{{__('messages.added_on') }}</th>
                    <th>{{__('messages.status') }}</th>
                    <th style="width:25% !important">{{__('messages.action') }}</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($schedules as $key=>$item)
                    <tr>
                        <td>{{++$key}}</td>
                        <td>{{$item->duty_shift}}</td>
                        <td>{{$item->duty_start_time}}</td>
                        <td>{{$item->schedule_remark}}</td>
                        <td>{{$item->added_on}}</td>
                        <td>{{($item->schedule_status > 1) ? 'Approved' : 'Draft'}}</td>
                        <td class="center">
                            @if ($item->schedule_status <= 1)
                                @can('schedule.edit')
                                    <a id="edit_btn" edit-id="{{ $item->sas_id }}" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                    data-bs-target="#schedule_add_modal"><i class="edit-ico"></i> Edit</a>
                                @endcan

                                @can('schedule.approve')
                                    <a id="approve_btn" onclick="approvePost({{ $item->sas_id }})" class="btn btn-sm btn-warning">
                                        <i class="ok-ico"></i> Approve

                                        <form id="approve-form-{{ $item->sas_id }}"
                                            action="{{ route('schedules.approve', $item->sas_id) }}" method="POST" style="display: none;">
                                            @csrf
                                        </form>
                                    </a>
                                @endcan

                                @can('schedule.delete')
                                    <a href="#" class="btn btn-sm btn-danger" onclick="deletePost({{ $item->sas_id }})">
                                        <img src="{{ asset('assets/icons/svg/delete.svg') }}" alt="" /> Remove
                                        <form id="delete-form-{{ $item->sas_id }}"
                                            action="{{ route('schedules.destroy', $item->sas_id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </a>
                                @endcan
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{--   schedule add modal--}}
    <div class="modal fade" id="schedule_add_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content p-5">
                <h4 class="card-title">{{__('messages.schedules') ." ". __('messages.information')}}</h4>
                <div class="modal-body p-0 mt-3">
                    <form action="{{ route('schedules.store') }}" method="POST" role="form" id="form1"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <input type="hidden" name="sas_id" id="sas_id">
                                <div class="form-group">
                                    <label class="form-label" for="duty_shift">
                                        {{ __('messages.duty_shift') }}
                                        <span class="text-danger">*</span></label>
                                    {{-- <input type="text" class="form-control @error('duty_shift') is-invalid @enderror"
                                           name="duty_shift" placeholder="Enter Shift of duty" id="duty_shift" required/> --}}

                                        <select id="duty_shift" name="duty_shift" class="form-control" style="width:100%;height:auto">
                                            <option value="">-Select-</option>
                                            <option value="Morning">Morning</option>
                                            <option value="Day">Day</option>
                                            <option value="Both">Both-Morning & Day</option>
                                            <option value="Night">Night</option>
                                            <option value="FullTime">FullTime</option>
                                        </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="duty_start_time">{{__('messages.in_time')}}<span class="text-danger">*</span></label>
                                    <input type="time" step="0.01" class="form-control @error('duty_start_time') is-invalid @enderror"
                                           name="duty_start_time" placeholder="{{__('messages.enter') ." ". __('messages.in_time')}}" required id="duty_start_time"/>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="schedule_remark">{{ __('messages.comments') }}</label>
                                    <textarea type="text" class="form-control" name="schedule_remark" placeholder="{{__('messages.enter') ." ". __('messages.comments')}}"
                                        id="schedule_remark"/></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="added_on">{{ __('messages.added_on') }} <span
                                            class="text-danger"></span></label>
                                    <input type="text" class="form-control @error('added_on') is-invalid @enderror"
                                           name="added_on" placeholder="{{__('messages.enter') ." ". __('messages.added_on')}}" id="added_on" value="<?php echo date('Y-m-d H:i:s')?>" readonly required/>
                                </div>
                            </div>
                        </div>
                        <div class="mt-5 d-flex justify-content-end ">
                            <button type="button" class="btn btn-sm btn-danger  me-2" data-bs-dismiss="modal"
                                    style="">{{ __('messages.close') }}
                            </button>
                            @can('schedule.create')
                                <button type="submit" class="btn btn-sm btn-primary" >
                                    {{ __('messages.save') }}
                                </button>
                            @endcan
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="schedule_edit_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content p-5">
                <h4 class="card-title">{{__('messages.schedules') ." ". __('messages.information')}}</h4>
                <div class="modal-body p-0 mt-3">
                    <form action="{{ route('schedules.new.update') }}" method="POST" role="form" id="form1"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="duty_shift">
                                        {{ __('messages.duty_shift') }}
                                        <span class="text-danger">*</span></label>
                                        <select id="duty_shift" name="duty_shift" class="form-control" style="width:100%;height:auto">
                                            <option value="">-Select-</option>
                                            <option value="Morning">Morning</option>
                                            <option value="Day">Day</option>
                                            <option value="Both">Both-Morning & Day</option>
                                            <option value="Night">Night</option>
                                            <option value="FullTime">FullTime</option>
                                        </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="duty_start_time">
                                        {{__('messages.in_time')}}
                                        <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('duty_start_time') is-invalid @enderror"
                                           name="duty_start_time" placeholder="{{__('messages.enter') ." ". __('messages.in_time')}}" required id="duty_start_time"/>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="schedule_remark">{{ __('messages.comments') }}</label>
                                    <input type="text" class="form-control" name="schedule_remark" placeholder="{{__('messages.enter') ." ". __('messages.comments')}}"
                                           id="schedule_remark"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="added_on">{{ __('messages.added_on') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('added_on') is-invalid @enderror"
                                           name="added_on" placeholder="{{__('messages.enter') ." ". __('messages.added_on')}}" id="added_on" value="<?php echo date('Y-m-d H:i:s')?>" readonly required/>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="sas_id" id="sas_id">
                        <div class="mt-5 d-flex justify-content-end ">
                            <button type="button" class="btn  me-2" data-bs-dismiss="modal"
                                    style="background: #EAECF0;"> {{ __('messages.close') }}
                            </button>
                            @can('schedule.edit')
                                <button type="submit" class="btn btn-primary" >
                                    {{ __('messages.update') }}
                                </button>
                            @endcan
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}
@endsection
@push('scripts')
    <script type="text/javascript">


        function approvePost(id) {
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, approve it!',
                cancelButtonText: 'No, cancel!',
                confirmButtonClass: 'btn btn-warning ms-2',
                cancelButtonClass: 'btn btn-success',
                buttonsStyling: false,
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    event.preventDefault();
                    document.getElementById('approve-form-' + id).submit();
                }
            })
        }
        $(document).ready(function ($) {
            $(document).on('click', '#edit_btn', function () {
                let id = $(this).attr('edit-id');
                $.ajax({
                    type: "GET",
                    url: "{{ url('system/schedules') }}/" + id + "/edit",
                    success: function (res) {
                        $('#duty_start_time').val(res.duty_start_time);
                        $('#duty_shift').val(res.duty_shift);
                        $('#schedule_remark').val(res.schedule_remark);
                        $('#schedule_start').val(res.schedule_start);
                        $('#sas_id').val(res.sas_id);
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            });


            $('.add_new_btn').click(function () {
                // axios.get("{{ url('system/roles/create') }}").then(function (response) {
                //     $('.roleCreateModal').html(response.data);
                //     $('.modal-spinner').hide();
                //     $(".modal").on("hidden.bs.modal", function () {
                //         $(".roleCreateModal").html(` <div class="modal-spinner d-flex flex-column align-items-center">
                //             <div class="spinner-border text-secondary" role="status">
                //                 <span class="sr-only"></span>
                //             </div>
                //             <h5 class="mt-1">Loading...</h5>
                //         </div>`);
                //     });
                //     createPageJS();
                // }).catch(function (error) {
                //     console.log(error)
                // })
                document.getElementById("form1").reset();
            })
        });
    </script>
@endpush
