@extends('admin.layouts.leadManagement')
@section('title')
   Attendance
@endsection

@section('style')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css?v={{env('CRM_VERSION')}}" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/lead.css?v={{env('CRM_VERSION')}}"> 
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{ env('CRM_VERSION') }}" />
<link rel="shortcut icon" href="/uploads/app/logo/3OtxeXcMv5lhQzNLERhnmclPXorAN4msV8upXbCm.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />

<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />

<style>

	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ece8fe;
    }
    .inactive-follow {
        border: 1px solid #da1c1c;
        color: #da1c1c;
        background: #FFFFFF;
        /* margin-right: 15px; */
    }

    body.zoom-80 {
        zoom: 70%;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background: #a4c0db;
        color: #747579;
    }

    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #000000;
        padding: 10px;
    }

    
    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #000000 !important;
        padding: 10px;
    }
    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #747579;
        padding: 10px;
    }
    .select2-container--default .select2-results__option--selected {
        background: #b4daff;
        color: #000000;
    }
   

</style>

@endsection
@section('content')
@php
    @$attendance_edit = userCan('attendance.update');
    @$attendance_delete = userCan('attendance.delete');
@endphp
<style>
    
    .loader{
        z-index: 1000;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }
    .hide_data{
        display: inline;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* background:white; */
        height: 100vh;
        width: 100%;
        z-index: 1000;

    }

    #followps_show:hover{
        display: inline;
    }

    .comment:hover> .followps_show{
        display: inline;
    }
    #formSubmit{
        display: none;
        margin-top:20px;
    }
    .main .btns {
    margin-bottom: -1px;
}
    
</style>    
<style>
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
        background-color: #ece8fe;
    }

    .inactive-follow {
        border: 1px solid #da1c1c;
        color: #da1c1c;
        background: #FFFFFF;
        /* margin-right: 15px; */
    }

    body.zoom-80 {
        zoom: 70%;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background: #a4c0db;
        color: #747579;
    }

    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #000000;
        padding: 10px;
    }


    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #000000 !important;
        padding: 10px;
    }

    .select2-container--default .select2-dropdown .select2-results .select2-results__option {
        color: #747579;
        padding: 10px;
    }

    .select2-container--default .select2-results__option--selected {
        background: #b4daff;
        color: #000000;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        padding-right: 28px;
        color: #747579;
        font-size: 0.9375rem;
        line-height: 18px;
        text-overflow: ellipsis;
        width: 100%;
    }
</style>
<script>

</script>




<style>
    .select2-dropdown{
        width:300px !important;
    }
    .create_btn{
        font-family: "Roboto Medium";
    border: 1px solid #066AC9;
    color: #066AC9;
    margin-left: 10px;
    display: inline-block;
    font-size: 0.9375rem;
    line-height: 18px;
    text-align: center;
    border-radius: 5px;
    padding: 6px 18px;
    }

    .create_btn:hover{
        font-family: "Roboto Medium";
    border: 1px solid #066AC9;
    background: #066AC9;
    color: white;
    margin-left: 10px;
    display: inline-block;
    font-size: 0.9375rem;
    line-height: 18px;
    text-align: center;
    border-radius: 5px;
    padding: 6px 18px;
    }
    </style>
<script>

</script>

<div class="hide_data">
    
</div>
<div class="main">
    <div class="top mb-3">
        <div class="head-detail">
            <p class="head">Slot Create</p>
        </div>

        <p class="t-right">
            @if (userCan('slot.create'))
            <a href="{{ route('slot.index') }}" class="create_btn">Back</a>
            @endif
        </p>
        
    </div>

 
    
    <div class="detail-list">
        <form action="{{ route('slot.store') }}" method="POST">
            @csrf
            <div class="row">
                
        
                

                <div class="col-md-6 col-sm-12 col-lg-4 col-xl-3 mt-1 mb-1">
                    <div class="form-group">
                        <label class="form-label" for="name">{{ __('slot Name') }} <small
                            class="text-danger">*</small></label>
                            <input type="text" class="form-control"  id="name" name="name" value="{{ old('name') }}" >
                        @error('name')
                            <p  role="alert" style="color: red;">{{ @$message }}</p>
                        @enderror
                    </div>
                </div>


                <div class="col-md-6 col-sm-12 col-lg-4 col-xl-3 mt-1 mb-1">
                    <div class="form-group">
                        <label class="form-label" for="time_to">{{ __('Start Time') }} <small
                            class="text-danger">*</small></label>
                            <input type="time" class="form-control" id="time_to"  name="time_to" value="{{ old('time_to') }}" >
                        @error('time_to')
                            <p  role="alert" style="color: red;">{{ @$message }}</p>
                        @enderror
                        
                    </div>
                </div>

                <div class="col-md-6 col-sm-12 col-lg-4 col-xl-3 mt-1 mb-1">
                    <div class="form-group">
                        <label class="form-label" for="time_from">{{ __('End Time') }} <small
                            class="text-danger">*</small></label>
                            <input type="time" class="form-control" id="time_from"  name="time_from" value="{{ old('time_from') }}" >
                        @error('time_from')
                            <p  role="alert" style="color: red;">{{ @$message }}</p>
                        @enderror
                        
                    </div>
                </div>


                <div class="col-md-6 col-sm-12 col-lg-4 col-xl-3 mt-1 mb-1">
                    <div class="form-group">
                        <label class="form-label" for="time_from">{{ __('Active/Inactive slot') }} <small
                            class="text-danger">*</small></label>
                        <div class=" form-switch">
                            <input class="form-check-input" type="checkbox" id="status" name="status" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-width="100" data-height="40" {{ old('status') ? 'checked' : '' }}>
                          </div>
                        @error('status')
                            <p  role="alert" style="color: red;">{{ @$message }}</p>
                        @enderror
                    </div>
                </div>


            <div class="row mt-4 ">
                <div class="col-md-12">
                <button class="btn btn-success" type="submit" style="width:150px;">
                    {{ __('Save') }}
                </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="overlay"></div>
<div class="sidebar-overlay"></div>

<div class="loader"></div>
@php 
   
    
   @endphp

@endsection





@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{env('CRM_VERSION')}}"
integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('backend') }}/lead-management/js/common.js?v={{env('CRM_VERSION')}}"></script>
<script src="{{ asset('backend') }}/lead-management/js/lead.js?v={{env('CRM_VERSION')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{env('CRM_VERSION')}}"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{env('CRM_VERSION')}}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{env('CRM_VERSION')}}"></script>

<script src="{{ asset('tinymce/tinymce.min.js?v=' . env('CRM_VERSION')) }}" referrerpolicy="origin"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{env('CRM_VERSION')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
crossorigin="anonymous"></script>

    <script>
       $(document).ready(function() {
            // $('#formSubmit').show();
            $('.form_load').hide();
        $('.hide_data').hide();
        });
        
       
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
    </script>

<script>
    
  
    
  
</script>

@endsection