@extends('portal.main.layout')

@section('title','Schedules')

@section('breadcrumb')

    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm text-white">
            <a class="text-white" href="{{ route('dashboard.index') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>
        <li class="breadcrumb-item text-sm text-white active" aria-current="page">@yield('title')</li>
    </ol>

@endsection

@section('styles')

    <link rel="stylesheet" type="text/css" href="{{ asset('searchselect/select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/datatable/datatables.min.css') }}">

@endsection

@section('content')

    <style>

        .fixed-plugin-side .fixed-plugin-side-button{
            background:#fff;
            border-radius:50%;
            bottom:30px;
            right:30px;
            font-size:1.25rem;
            z-index:990;
            box-shadow:0 2px 12px 0 rgba(0,0,0,.16);
            cursor:pointer
        }
        .fixed-plugin-side .fixed-plugin-side-button i{
            pointer-events:none
        }
        .fixed-plugin-side .card{
            position:fixed!important;
            right:-460px;
            top:0;
            height:100%;
            left:auto!important;
            transform:unset!important;
            width:460px;
            border-radius:0;
            padding:0 10px;
            transition:.2s ease;
            z-index:1020
        }
        .fixed-plugin-side .badge{
            border:1px solid #fff;
            border-radius:50%;
            cursor:pointer;
            display:inline-block;
            height:23px;
            margin-right:5px;
            position:relative;
            width:23px;
            transition:all .2s ease-in-out
        }
        .fixed-plugin-side .badge.active,.fixed-plugin-side .badge:hover{
            border-color:#344767
        }
        .fixed-plugin-side .btn.bg-gradient-primary:not(:disabled):not(.disabled){
            border:1px solid transparent
        }
        .fixed-plugin-side .btn.bg-gradient-primary:not(:disabled):not(.disabled):not(.active){
            background-color:transparent;
            background-image:none;
            border:1px solid #5e72e4;
            color:#5e72e4
        }
        .fixed-plugin-side.show .card{
            right:0
        }
        .input-group{
            border-radius:.5rem
        }

        @media screen and (max-width: 480px) {
            .fixed-plugin-side .fixed-plugin-side-button{
                background:#fff;
                border-radius:50%;
                bottom:30px;
                right:30px;
                font-size:1.25rem;
                z-index:990;
                box-shadow:0 2px 12px 0 rgba(0,0,0,.16);
                cursor:pointer
            }
            .fixed-plugin-side .fixed-plugin-side-button i{
                pointer-events:none
            }
            .fixed-plugin-side .card{
                position:fixed!important;
                right:-100vw;
                top:0;
                height:100%;
                left:auto!important;
                transform:unset!important;
                width:100vw;
                border-radius:0;
                padding:0 10px;
                transition:.2s ease;
                z-index:1020
            }
            .fixed-plugin-side .badge{
                border:1px solid #fff;
                border-radius:50%;
                cursor:pointer;
                display:inline-block;
                height:23px;
                margin-right:5px;
                position:relative;
                width:23px;
                transition:all .2s ease-in-out
            }
            .fixed-plugin-side .badge.active,.fixed-plugin-side .badge:hover{
                border-color:#344767
            }
            .fixed-plugin-side .btn.bg-gradient-primary:not(:disabled):not(.disabled){
                border:1px solid transparent
            }
            .fixed-plugin-side .btn.bg-gradient-primary:not(:disabled):not(.disabled):not(.active){
                background-color:transparent;
                background-image:none;
                border:1px solid #5e72e4;
                color:#5e72e4
            }
            .fixed-plugin-side.show .card{
                right:0
            }
        }

    </style>

    <div class="row mt-4" id="schedule-page" data-loadingurl="{{ route('schedule.list') }}"
         data-storeurl="{{ route('schedule.store') }}"
         data-editurl="{{ route('schedule.edit') }}"
         data-deleteurl="{{ route('schedule.delete') }}"
         data-closeurl="{{ route('schedule.close') }}"
         data-staffurl="{{ route('schedule.staff') }}"
         data-token="{{ csrf_token() }}">
        <div class="col-12">
            <div class="card">

                <div class="card-header">
                    <div class="row">

                        <div class="col-2">
                            {{--<button type="button" class="btn btn-icon btn-3 btn-primary" data-bs-toggle="modal" data-bs-target="#modal-form">
                                <span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>
                                <span class="btn-inner--text">Create</span>
                            </button>--}}
                            <button type="button" id="createbtn" class="btn btn-icon btn-3 btn-primary" onclick="showleftbar()">
                                <span class="btn-inner--icon" id="createbtnspnico"><i class="ni ni-fat-add" id="createbtnicon"></i></span>
                                <span class="btn-inner--text" id="createbtntxt">Create</span>
                            </button>
                        </div>

                    </div>
                </div>
                <div class="table-responsive" style="min-height: 40vh;margin-top: -20px">

                    <table class="table table-flush" id="dt-schedule">
                        <thead class="thead-light">
                        <tr>
                            <th style="color:#000;width: 5px" class="text-sm">No</th>
                            <th style="color:#000;" class="text-sm">Title</th>
                            <th style="color:#000;" class="text-sm">Checklist</th>
                            <th style="color:#000;" class="text-sm">Assigned By</th>
                            <th style="color:#000;" class="text-sm">Assigned Department</th>
                            <th style="color:#000;" class="text-sm">Notified Staff</th>
                            <th style="color:#000;" class="text-sm">Date From</th>
                            <th style="color:#000;" class="text-sm">Date To</th>
                            <th style="color:#000;" class="text-sm">Reaction</th>
                            <th style="color:#000;" class="text-sm">Status</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

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

    <div class="fixed-plugin-side" id="side_form">
        {{--<a class="fixed-plugin-side-button text-dark position-fixed px-3 py-2" id="cli" --}}{{--href="javascript:;"--}}{{-- onclick="showleftbar()">
            <i class="fa fa-cog py-2" aria-hidden="true"> </i>
        </a>--}}
        <div class="card shadow-lg">
            <div class="card-header pb-0 pt-3 bg-transparent ">
                <div class="float-start">
                    <h3 class="mt-3 mb-0 font-weight-bolder text-success text-gradient" id="addeditmodaltitle">Create</h3>
                </div>
                <div class="float-end mt-4">
                    <button class="btn btn-link text-dark p-0 fixed-plugin-side-close-button" onclick="hideleftbar()">
                        <i class="fa fa-close" aria-hidden="true"></i>
                    </button>
                </div>

            </div>
            <hr class="horizontal dark my-1">
            <div class="card-body pt-sm-3 pt-0 overflow-auto">

                <form>

                    @include('portal.main.sidebarerror')

                    @include('portal.main.sidebarloader')

                    <div class="col-12">
                        <input type="hidden" id="schedule_id">
                        <div class="row text-start">
                            <div class="col-12 col-md-12 ms-auto mt-1">
                                <h6>Checklist</h6>
                                <div style="margin-top: 14px!important;">
                                    <select class="select2 form-control" style="width: 100%" id="checklist_id">

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

                    <div class="col-12 rmorecipient">
                        <div class="row text-start rmorecipient">
                            <div class="col-12 col-md-12 ms-auto mt-4 rmorecipient">
                                <h6 class="rmorecipient">Assign To Department</h6>
                                <div class="rmorecipient" style="margin-top: 14px!important;">
                                    <select onchange="loadStaff()" class="select2 form-control rmorecipient" style="width: 100%" id="department_id">

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

                    <div class="col-12">
                        <div class="row text-start">
                            <div class="col-12 col-md-12 ms-auto mt-4">
                                <h6>Title</h6>
                                <input id="title" class="form-control" type="text" placeholder="" />
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row text-start">
                            <div class="col-12 col-md-6 ms-auto mt-3">
                                <h6>From</h6>
                                <input id="from" class="form-control" type="datetime-local" placeholder="" />
                            </div>
                            <div class="col-12 col-md-6 ms-auto mt-3">
                                <h6>To</h6>
                                <input id="to" class="form-control" type="datetime-local" placeholder="" />
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row text-start">
                            <div class="col-12 col-md-12 ms-auto mt-4">
                                <h6>Send Notification to Staff</h6>
                                <div class="row">
                                    <div class="col-sm-10">
                                        <div style="margin-top: 14px!important;">
                                            <select class="select2 form-control" style="width: 100%" id="staffemail">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <a onclick="addRecipient()" href="javascript:;" id="addrecipientbtn" class="btn btn-sm btn-icon-only bg-gradient-primary mt-2">
                                            <i class="fa fa-plus"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="displaystatus mt-3" id="recipientstable" style="max-height: 200px;overflow-y: scroll">
                            <table class="align-items-center mb-0 table-bordered border" id="recipientstable" style="width: 100%;">
                                <tbody id="recipientsbody">

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

                    <div class="text-center">
                        <button id="savebutton" onclick="saveSchedule()" type="button" class="btn btn-round bg-gradient-success btn-lg w-100 mt-4 mb-0">Save</button>
                    </div>
                </form>

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

    <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <div class="card card-plain">
                        <div class="card-header pb-0 text-left">
                            <h3 class="font-weight-bolder text-success text-gradient">Reason</h3>
                        </div>
                        <div class="card-body" style="margin-top: -45px">
                            <form>

                                @include('portal.main.error')

                                @include('portal.main.loadinginmodal')

                                <div class="col-12">
                                    <div class="row text-start">
                                        <div class="col-12 col-md-12 ms-auto mt-3">
                                            <div id="message_desc"></div>
                                        </div>
                                    </div>
                                </div>

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

    {{--<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="card card-plain">
                    <div class="card-header pb-0 text-left">
                        <h3 class="font-weight-bolder text-success text-gradient" id="addeditmodaltitle">Create</h3>
                    </div>
                    <div class="card-body" style="margin-top: -45px">
                        <form>

                            @include('portal.main.error')

                            @include('portal.main.loadinginmodal')

                            <div class="col-12">
                                <input type="hidden" id="schedule_id">
                                <div class="row text-start">
                                    <div class="col-12 col-md-12 ms-auto mt-4">
                                        <h6>Checklist</h6>
                                        <div style="margin-top: 14px!important;">
                                            <select class="select2 form-control" style="width: 100%" id="checklist_id">

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

                            <div class="col-12">
                                <div class="row text-start">
                                    <div class="col-12 col-md-12 ms-auto mt-4">
                                        <h6>Assign To Department</h6>
                                        <div style="margin-top: 14px!important;">
                                            <select onchange="loadStaff()" class="select2 form-control" style="width: 100%" id="department_id">

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

                            <div class="col-12">
                                <div class="row text-start">
                                    <div class="col-12 col-md-12 ms-auto mt-4">
                                        <h6>Title</h6>
                                        <input id="title" class="form-control" type="text" placeholder="" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="row text-start">
                                    <div class="col-12 col-md-6 ms-auto mt-3">
                                        <h6>From</h6>
                                        <input id="from" class="form-control" type="date" placeholder="" />
                                    </div>
                                    <div class="col-12 col-md-6 ms-auto mt-3">
                                        <h6>To</h6>
                                        <input id="to" class="form-control" type="date" placeholder="" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="row text-start">
                                    <div class="col-12 col-md-12 ms-auto mt-4">
                                        <h6>Send Notification to Staff</h6>
                                        <div style="margin-top: 14px!important;">
                                            <select class="select2 form-control" style="width: 100%" id="staffemail">

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

                            <div class="text-center">
                                <button id="savebutton" onclick="saveSchedule()" type="button" class="btn btn-round bg-gradient-success btn-lg w-100 mt-4 mb-0">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>--}}

@endsection

@section('scripts')

    <script src="{{ asset('assets/js/datatable/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/datatable/datatable-basic.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('searchselect/select2.full.js') }}" type="text/javascript"></script>
    <script src="{{ asset('searchselect/form-select2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/plugins/sweetalert2.all.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/plugins/sweet-alerts.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/core/schedule.js') }}" type="text/javascript"></script>

@endsection