@extends('layouts.master')

@push('page-styles')
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-datetimepicker.min.css')}}">
@endpush

@section('content')
<div class="content container-fluid">

    <!-- Page Header -->
    <x-page-header title="{{$title}}">
        <div class="col-auto float-right ml-auto">
            <a href="javascript:void(0)" data-toggle="modal" data-target="#add_shift_schedule" class="btn add-btn"><i class="fa fa-plus"></i> Add Schedule</a>
        </div>
    </x-page-header>
    <!-- /Page Header -->

    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-striped custom-table mb-0 datatable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Employee</th>
                            <th>Shift Name</th>
                            <th>Min Start Time</th>
                            <th>Start Time</th>
                            <th>Max Start Time</th>
                            <th>Min End Time</th>
                            <th>End Time</th>
                            <th>Max End Time</th>
                            <th>Break</th>
                            <th>Created At</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection

@push('modals')
<x-modals.modal id="add_shift_schedule" type="modal-lg">
    <x-slot:title>
        Add Shift Schedule
    </x-slot>
    <form action="{{route('schedules.store')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.select name="employee" label="Employee">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.select name="shift" label="Shift">
                        @foreach ($shifts as $shift)
                            <option value="{{$shift->id}}">{{$shift->name}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.datepicker name="date" label="Date"></x-form.datepicker>
                </div>
            </div>
            <div class="col-sm-12">
                <x-form.checkbox name="extra_hrs" label="Accept Extra Hours"></x-form.checkbox>
            </div>
            <div class="col-sm-12">
                <x-form.checkbox name="published" label="Publish"></x-form.checkbox>
            </div>
            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.textarea name="note" label="Add Note"></x-form.input>
                </div>
            </div>
        </div>
        <div class="submit-section">
            <button class="btn btn-primary submit-btn">Submit</button>
        </div>
    </form>
</x-modals.modal>
<x-modals.modal id="edit_shift_schedule" type="modal-lg">
    <x-slot:title>
        Update Shift
    </x-slot>
    <form action="{{route('schedules.update')}}" method="POST" enctype="multipart/form-data">
        @csrf
        @method("PUT")
        <input type="hidden" name="id" id="edit_id">
        <div class="row">
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.select id="edit_employee" name="employee" label="Employee">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.select id="edit_shift" name="shift" label="Shift">
                        @foreach ($shifts as $shift)
                            <option value="{{$shift->id}}">{{$shift->name}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="input-block mb-3">
                    <x-form.datepicker name="date" label="Date"></x-form.datepicker>
                </div>
            </div>
            <div class="col-sm-12">
                <x-form.checkbox name="extra_hrs" id="edit_extra_hrs" label="Accept Extra Hours"></x-form.checkbox>
            </div>
            <div class="col-sm-12">
                <x-form.checkbox name="published" id="edit_published" label="Publish"></x-form.checkbox>
            </div>
            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.textarea name="note" label="Add Note"></x-form.input>
                </div>
            </div>
        </div>
        <div class="submit-section">
            <button class="btn btn-primary submit-btn">Submit</button>
        </div>
    </form>
</x-modals.modal>
<x-modals.modal id="delete_shift_schedule">
    <div class="form-header">
        <h3>Delete Schedule</h3>
        <p>Are you sure want to delete?</p>
    </div>
    <form method="post" action="{{route('schedules.destroy')}}">
        @csrf
        @method("DELETE")
        <input type="hidden" name="id" id="delete_id">
        <div class="modal-btn delete-action">
            <div class="row">
                <div class="col-6">
                    <button type="submit"  class="btn btn-primary w-100 continue-btn">Delete</button>
                </div>
                <div class="col-6">
                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</x-modals.modal>
@endpush

@push('page-scripts')
<script src="{{asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: "{{route('schedules.index')}}",
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'employee', name: 'employee'},
                    {data: 'shift', name: 'shift'},
                    {data: 'min_start', name: 'min_start'},
                    {data: 'start', name: 'start'},
                    {data: 'max_start', name: 'max_start'},
                    {data: 'min_end', name: 'min_end'},
                    {data: 'end', name: 'end'},
                    {data: 'max_end', name: 'max_end'},
                    {data: 'break', name: 'break'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                initComplete: function(){
                    $('tr>td:last-child').addClass('text-right')
                }
            })
            $('table').on('click', '.edit', function(){
                var schedule = $(this).data('schedule').model;
                $('#edit_shift_schedule').modal('show');
                var id  = schedule.id;
                var published = schedule.is_published;
                var extra_hrs = schedule.accept_extra_hrs;
                var employee = schedule.employee_id;
                var shift = schedule.shift_id;
                var note = schedule.note;
                var date = schedule.date_;
                $('#edit_shift_schedule #edit_id').val(id);
                if(published == 1){
                    $('#edit_shift_schedule #edit_published').attr('checked', true);
                }
                if(extra_hrs == 1){
                    $('#edit_shift_schedule #edit_extra_hrs').attr('checked', true);
                }
                $('#edit_shift_schedule #id_note').val(note);
                $('#edit_shift_schedule #id_date').val(date);
                $('#edit_shift_schedule #edit_employee').val(employee).trigger('change');
                $('#edit_shift_schedule #edit_shift').val(shift).trigger('change');
            });
            $('table').on('click', '.trash_', function(){
                $('#delete_shift_schedule').modal('show');
                var id = $(this).data('id');
                $('#delete_id').val(id);
            });
            if($('.timepicker').length > 0) {
                $('.timepicker').datetimepicker({
                    format: "hh:mm:ss",
                    icons: {
                        up: "fa fa-angle-up",
                        down: "fa fa-angle-down",
                        next: 'fa fa-angle-right',
                        previous: 'fa fa-angle-left'
                    }
                });
            }
            $('.multiple').select2({
                width: "100%"
            });
        })

    </script>
@endpush