@extends('tenant.layouts.supervisor-wfm')

{{-- Tilte Section --}}
@section('title', 'Schedule Uploader')

{{-- Style Section --}}
@section('style')
    <style>
        .file-preview {
            border-style: none;
            padding: 0;
        }

        .file-drop-zone {
            border-radius: 1rem;
            min-height: 50px !important;
            height: 13rem;
            margin-top: 0.5rem;
        }

        .file-caption-name {
            display: none;
        }

        .gradient-border {
            height: 3.2rem;
            background: linear-gradient(to right, #00a34e 50%, #a8c859);
            color: white !important;
        }

        .display-7 {
            font-size: 1rem;
        }

        .upload-button {
            background-color: #01A44F;
            color: white;
            width: 10rem;
        }

        .upload-button:hover {
            background-color: #01A44F;
        }

        .bi-file-earmark-arrow-up {
            display: none;
        }

        .file-input {
            position: relative !important;
        }

        .fileinput-remove {
            position: absolute !important;
            right: 20px;
            top: -180px;
        }

        .fileinput-remove-button {
            border: none;
            background-color: transparent !important;
        }

        .fileinput-remove-button:hover {
            background-color: white;
            color: black;
        }

        .file-drop-zone-title {
            padding-top: 2rem;
        }

        .btn-default {
            background-color: rgb(212, 212, 212);
        }

        .hidden-xs {
            display: none;
        }

        .calendar-style {
            right: 1.2rem;
            bottom: 0.3rem;
            cursor: pointer;
        }

        /*.icon {*/
        /*    font-size: 1.2rem;*/
        /*}*/

        input:hover,
        select:hover {
            cursor: pointer;
        }

        /*.logo {*/
        /*    aspect-ratio: 1/1;*/
        /*    height: 28px;*/
        /*    width: 28px;*/
        /*}*/

        .bi-upload::before {
            margin-bottom: 1rem;
        }

        /* ::-webkit-scrollbar {
                    display: none;
                } */

        input[type="date"]::-webkit-calendar-picker-indicator {
            /* display: none; */
            /* -webkit-appearance: none; */
            width: 15px;
            padding: 0px;
            margin: 0px;
            /* margin-top: 10px; */
            cursor: pointer;
        }

        .border-dashed {
            border: 1px dashed black !important;
        }

    </style>
    <link rel="stylesheet" href="{{asset('css/wfm.css')}}">
    <link rel="stylesheet" href="{{asset('css/ranking.css')}}">



    {{-- fontaweseome icons  --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    {{-- file input package  --}}
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <style>
        .dropdown-menu {

            --bs-dropdown-link-active-bg: #228908 !important;

        }

        #accountsearchChooseTime {

            cursor: pointer;
        }

        #accountsearchMenu {
            background: white !important;

        }

    </style>
    <style>
        .timeFilterContainer input[type="time"]::-webkit-calendar-picker-indicator {
            background: none;
        }
        .timeFilterContainer input[type="date"]::-webkit-calendar-picker-indicator {
            background: none;
        }

        .timeFilterContainer {
            position: relative;
        }

        #fromClockIcon,
        #toClockIcon {
            position: absolute;
            right: 21%;
            bottom: 0.9rem;
            cursor: pointer;
        }

        #modalToClockIcon, #modalFromClockIcon {
            position: absolute;
            right: 1rem;
            bottom: 0.9rem;
            cursor: pointer;
        }
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid  px-5">

        <!-- upper card  -->
        <div class="row p-3">
            <div class="card shadow py-2   rounded border border-0 px-4">
                <div class="card-body" style="padding: 14px 3px 0 10px;">
                    <div class="row">
                        <div class="col-9 col-sm-9  px-2">
                            <div style="margin-bottom: 9px;"><span> <img src="{{ global_asset('assets/img/icons/uploader.png') }}" alt="" style="width: 31px;     margin-right: 7px;"> <span style="font-size: 18px; "> Schedule Uploader
                                    </span></span></div>
                            <div>
                                <div>
                                    <p id="fontStyle"> Create a new shift or manage the existing ones</p>
                                </div>


                            </div>
                        </div>
                        <div class="col-sm-3 col-md-3 col-lg-3 p-2 text-end">
                            <a href="{{ route('supervisor.wfm.uploader.export') }}" title="Export Agents to Excel">

                                <img style="margin-right: 3%;width: 40px;padding: 5px;border: 1px solid #00000096;" id="iconImage" src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/excel.png" alt="excel-button">

                            </a>
                        </div>
                        {{-- <div class="col-4 text-end pt-lg-3 pt-4">
                           <img src="{{ global_asset('assets/img/icons/excel.png') }}" alt="excel icon" class="float-end border rounded p-1 shadow">
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>


        <div class="row px-4">
            <div class="col-12 px-4">
                @if (session()->has('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('success') }}
                    </div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger" role="alert">
                        {{ session('error') }}
                    </div>
                @endif
            </div>
        </div>
        <!-- bottom card (uploader) -->
        <div class="row p-3">
            <div class="card p-0 shadow rounded overflow-hidden">
                <div class="card-header gradient-border"></div>
                <div class="card-body pb-0">
                    <form method="POST" action="{{ route('supervisor.wfm.uploader.store') }}" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-md-12 col-lg-4">
                                <div class="mb-3">
                                    <label for="formFile" class="form-label ms-3 m-0 mt-1"><strong>
                                            Questions:</strong></label>
                                    <input class="form-control p-3" type="file" id="fileinput" name="file">
                                    <small class="ms-2 ps-1 text-nowrap"><b style="white-space: pre-line">File format must be XLSX, CSV, or XLS</b></small>
                                    @error('file')
                                        <p class="ms-2 ps-1 text-nowrap text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-8 col-11 ms-lg-0 ms-3">

                                @csrf
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="account" class="form-label mb-1"><strong>Account</strong></label>
                                        <select id="account" name="account" class="form-select text-muted fst-normal">
                                            <option value="">--Select Account--</option>
                                            <option value="{{ $account }}" {{ old('account') == $account ? 'selected' : null }}>
                                                {{ $account }}</option>
                                        </select>
                                        @error('account')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="daysType" class="form-label mb-1"><strong>Work Day Type</strong></label>
                                        <select id="daysType" name="dayType" class="form-select text-muted fst-normal custom_arrow">
                                            <option value="">--Select Work Day Type--</option>
                                            @foreach ($daysType as $dayType)
                                                <option value="{{ $dayType->id }}" {{ old('dayType') == $dayType->id ? 'selected' : null }}>{{ $dayType->type }}</option>
                                            @endforeach
                                        </select>
                                        @error('dayType')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror

                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="statuses" class="form-label mb-1"><strong>Status</strong></label>
                                        <select id="statuses" name="status" class="form-select text-muted fst-normal">
                                            <option value="">--Select Work Day Type--</option>
                                            @foreach ($statuses as $status)
                                                <option value="{{ $status->id }}" {{ old('status') == $status->id ? 'selected' : null }}>{{ $status->status_type }}</option>
                                            @endforeach
                                        </select>
                                        @error('status')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror

                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="shift" class="form-label mb-1"><strong>Shift</strong></label>
                                        <select id="shift" name="shift" class="form-select text-muted fst-normal">
                                            <option value="">--Select Shift--</option>
                                            @foreach ($shifts as $shift)
                                                <option value="{{ $shift->id }}" {{ old('shift') == $shift->id ? 'selected' : null }}>{{ $shift->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('shift')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="skill" class="form-label mb-1"><strong>Skill</strong></label>
                                        <select id="skill" name="skill" class="form-select text-muted fst-normal">
                                            <option value="">--Select Skill--</option>
                                            @foreach ($skills as $skill)
                                                <option value="{{ $skill->id }}" {{ old('skill') == $skill->id ? 'selected' : null }}>{{ $skill->skill_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('skill')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="skillGroup" class="form-label mb-1"><strong>Skill Group</strong></label>
                                        <select id="skillGroup" name="skillGroup" class="form-select text-muted fst-normal">
                                            <option value="">--Select Group--</option>
                                            @foreach ($skillGroups as $skillGroup)
                                                <option value="{{ $skillGroup->id }}" {{ old('skillGroup') == $skillGroup->id ? 'selected' : null }}>{{ $skillGroup->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('skillGroup')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 ">
                                        <label for="from" class="form-label mb-1"><strong>From</strong></label>
                                        <input type="date" class="form-control" name="from" min="{{ \Carbon\Carbon::now()->addDay()->toDateString() }}">
                                        @error('from')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 ">
                                        <label for="to" class="form-label mb-1"><strong>To</strong></label>
                                        <input type="date" class="form-control" name="to" min="{{ \Carbon\Carbon::now()->addDay()->toDateString() }}" max="{{ \Carbon\Carbon::now()->addDays(14)->toDateString() }}">
                                        @error('to')
                                            <span class="text-danger text-sm-start">{{ $message }}</span>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row mb-3 mt-lg-0 mt-3 ms-2 ps-lg-1 ps-3">
                            <button class="btn btn-md upload-button border rounded" type="submit" name="submit">Upload File</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection

    {{-- Script Section --}}
    @section('script')
        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/locales/LANG.js"></script>
        <script>
            $("#fileinput").fileinput({
                'theme': 'fas',
                'showUpload': false,
                'showCancel': false,
                'showClose': false,
                'showRemove': true,
                'showBrowse': false,
                'maxFileCount': 1,
                'autoReplace': true,
                "browseOnZoneClick": true,
                "msgProcessing": "",
                'previewFileType': 'any',
                // 'allowedFileExtensions': ["csv"],
                // 'allowedPreviewExtensions': ['csv'],
                'msgValidationErrorIcon': "",
                'hideThumbnailContent': true,
                'dropZoneTitle': "<i class=\"bi bi-upload border text-dark border-dashed rounded-circle px-2 py-1\"></i><br><button class=\"btn btn-default btn-sm d-inline shadow \">Choose file</button><small class=\"fs-6 text-dark fw-light\"> No file chosen</small><br>",
                'dropZoneClickTitle': "<h6 class=\"text-success\">or drag it here</h6>",
            });
        </script>
    @endsection