@extends('layouts.master')

@section('style')
<style>
      
        .switch {
        position: relative;
        display: block;
        vertical-align: top;
        width: 68px;
        height: 20px;
        /* padding: 3px; */
        margin: 0 10px 10px 20px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
        border-radius: 18px;
        box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        box-sizing: content-box;
    }

    .switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        box-sizing: content-box;
    }

    .switch-label {
        width: 70px;
        position: relative;
        display: block;
        height: 28px;
        font-size: 14px;
        text-transform: uppercase;
        background: #eceeef;
        border-radius: inherit;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
        box-sizing: content-box;
    }

    .switch-label:before,
    .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        box-sizing: content-box;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaaaaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

    .switch-input:checked~.switch-label {
        background: #1b84ff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }

    .switch-input:checked~.switch-label:before {
        opacity: 0;
    }

    .switch-input:checked~.switch-label:after {
        opacity: 1;
    }

    .switch-handle {
        position: absolute;
        top: 2px;
        right: 42px;
        width: 24px;
        height: 24px;
        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
        background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
        border-radius: 100%;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }

    .switch-input:checked~.switch-handle {
        left: 45px;
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .switch-label,
    .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }
    

    </style>
@endsection
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">Task <span class="text-muted">Add</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class=" pb-lg-11 pb-7">
                        <div class="container">                   
                            <form action="{{ route('assets.tasks.store') }}" method="POST" enctype='multipart/form-data'>
                                @csrf
                               

                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                        <label
                                        class="col-lg-6 col-form-label fw-semibold fs-6 required">Status</label>
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            @php 
                                            $selected_status = 'Open';
                                            @endphp
                                            <select class="form-select" data-control="select2"
                                            data-hide-search="true"
                                            data-placeholder="Select a State" id="STATUS"
                                            name="STATUS">                                            
                                            @foreach ($status_arr as $status)
                                            <option value="{{ $status }}"  {{ old('STATUS', $selected_status ?? '') == $status ? 'selected' : '' }}>
                                        {{ $status }}</option>
                                        @endforeach
                                    </select>
                                    @error('STATUS')
                                    <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                    
                                </div>
                                </div>
                                    <div class="col-md-4">
                                         <label
                                        class="col-lg-6 col-form-label fw-semibold fs-6">Category</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" class="form-control "
                                        id="VERIFIED" name="VERIFIED"
                                        value="{{ old('VERIFIED') }}">
                                        @error('POSTAL_CODE')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                        <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </div>
                                                                            
                                    </div>

                                       <div class="col-md-4">
                                        <label
                                        class="col-lg-6 col-form-label fw-semibold fs-6">Priority</label>
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <select class="form-select" data-control="select2"
                                            data-hide-search="true"
                                            data-placeholder="Select a PRIORITY" id="PRIORITY"
                                            name="PRIORITY">
                                            <option value="">Please select
                                            </option>
                                            @foreach ($priority_arr as $priority)
                                            <option value="{{ $priority }}">
                                        {{ $priority }}</option>
                                        @endforeach
                                    </select>
                                    @error('PRIORITY')
                                    <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                    
                                </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                         <label
                                        class="col-lg-6 col-form-label fw-semibold fs-6 required">Task</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" class="form-control "
                                        id="TASK" name="TASK"
                                        value="{{ old('TASK') }}">
                                        @error('TASK')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                        <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </div>
                                </div>

                                      <div class="col-md-4">
                                         <label class="col-lg-6 col-form-label fw-semibold fs-6">Due Date</label>
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="date" class="form-control showPicker"
                                            id="DUE_DATE" name="DUE_DATE"
                                            value="{{ old('DUE_DATE') }}">
                                            @error('DUE_DATE')
                                            <p class="text-danger">{{ $message }}</p>
                                            @enderror
                                            <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6">File</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="file" class="form-control "
                                                id="FILE" name="FILE"
                                                value="{{ old('FILE') }}">
                                                @error('DUE_DATE')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>

                            <div class="row">
                               

                                <div class="col-md-4">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6">Assigned To</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <select class="form-select" data-control="select2"
                                                    data-hide-search="true"
                                                    data-placeholder="Select users" id="ASSIGNED_TO"
                                                    name="ASSIGNED_TO"> 
                                                    <option value="">Please select</option>                                           
                                                    @foreach ($users as  $user)
                                                    <option value="{{ $user->id }}">
                                                    {{ $user->username }}</option>
                                                @endforeach
                                            </select>

                                                
                                                @error('ASSIGNED_TO')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>
                                <div class="col-md-4">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6 ps-4">Completed</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <label class="switch">
                                                <input class="switch-input" type="checkbox" name="COMPLETED" value="YES" id="paid_toggle">
                                                <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
                                                <span class="switch-handle"></span>
                                            </label>                                       
                                                @error('COMPLETED')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>
                                <div class="row">
                                <div class="col-md-12">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6">Notes</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <textarea name="NOTES"  cols="35" rows="3" class="form-control"></textarea>
                                                @error('NOTES')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>
                                </div>
                                <div class="row">
                                <div class="col-md-12">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6">Links</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <textarea name="links"  cols="35" rows="3" class="form-control"></textarea>
                                                @error('links')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>
                                </div>
                                <div class="row">
                                <div class="col-md-12">
                                            <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Description</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <textarea name="DESCRIPTION"  cols="35" rows="3" class="form-control"></textarea>
                                                @error('DESCRIPTION')
                                                <p class="text-danger">{{ $message }}</p>
                                                @enderror
                                                <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                    </div> 
                                </div>
                            </div>
                                <div class="col-md-9 offset-md-3 mt-5">
                                        <div class="d-flex">
                                            <a href="{{ route('assets.tasks.index') }}" class="btn btn-light me-2">Cancel</a>
                                            <button type="submit" data-kt-ecommerce-settings-type="submit" class="btn btn-primary" id="submit">
                                                <span class="indicator-label">Save</span>
                                            </button>
                                        </div>
                                    </div>
                               </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script>
        $('.datetimepicker').daterangepicker({
            timePicker: false ,
            singleDatePicker: true,
            locale: {
                format: 'MM/DD/YYYY'
            }
        });

        $('.showPicker').on('click', function () {
        this.showPicker();
    });
    </script>
@endsection