@extends('client.layouts.app')

@section('page_title', 'Processes')

@section('body_class', 'background-white')

@section('content')
<div class="processes processes--create">
    <div class="container-fluid">
        <h1 class="page-title">Processes</h1>

        <div class="processes__create-form-wrapper">
            <form method="" action="">
                @csrf

                <div class="form-group row">
                    <label for="process-id" class="col-12 col-form-label col-form-label--required">ID</label>

                    <div class="col-xs-12 col-md-4 col-lg-3">
                        <input id="process-id" type="text" class="form-control" name="process-id">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="process-name" class="col-12 col-form-label col-form-label--required">Process Name</label>

                    <div class="col-xs-12 col-md-4 col-lg-3">
                        <input id="process-name" type="text" class="form-control" name="process-name">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="company" class="col-12 col-form-label">Company</label>
                    <div class="col-xs-12 col-md-9 col-lg-6">
                        <select class="form-control selectpicker" id="company">
                            <option value="Acme International">Acme International</option>
                            <option value="Mario Bros">Mario Bros</option>
                            <option value="Luigi and Mario">Luigi and Mario</option>
                            <option value="Some Company">Some Company</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="order-date" class="col-12 col-form-label">Order Date</label>
                    <div class="col-xs-12 col-md-4 col-lg-3 h4h-datepicker" id="order-datetimepicker-parent">
                        <input type="text" class="form-control" id="order-date" />
                    </div>
                </div>

                <div class="form-group row">
                    <p class="col-12 col-form-label processes__next-execution-time">Desired Next Execution Time: <strong>17.07.2020 15:06</strong></p>
                    <div class="col-xs-12 col-md-3">
                        <button type="button" class="btn btn--dark-red-inverted">Accept</button>
                    </div>
                </div>

                <div class="form-group row form-group--processes-control">
                    <div class="col-12">
                        <div class="form-check form-check-inline form-check--radio">
                            <input
                                class="form-check-input"
                                type="radio"
                                name="processesExecutionTime"
                                id="oneTimeExecutionTime"value="one"
                                checked
                                data-target="#oneTimeExecutionSettingsContent"
                            >
                            <label class="form-check-label" for="oneTimeExecutionTime">
                                One time execution time
                            </label>
                        </div>

                        <div class="form-check form-check-inline form-check--radio">
                            <input
                                class="form-check-input"
                                type="radio"
                                name="processesExecutionTime"
                                id="recurrentExecutionTime"
                                value="recurrent"
                                data-target="#recurrentExecutionSettingsContent"
                            >
                            <label class="form-check-label" for="recurrentExecrecurrentExecutionSettingsContentutionTime">
                                Recurrent
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group row form-group--processes-settings" id="oneTimeExecutionSettingsContent">
                    <div class="col-xs-12 col-md-4 col-lg-3 h4h-datetimepicker" id="one-time-execution-datetimepicker-parent">
                        <input type="text" class="form-control" id="one-time-execution-datetimepicker" placeholder="Pick Date and Time"/>
                    </div>
                </div>

                <div class="form-group row form-group--processes-settings d-none" id="recurrentExecutionSettingsContent">
                    <div class="col-md-12 col-lg-3 pb-2 pb-lg-0">
                        <select class="form-control selectpicker" id="reccurent-options-select">
                            <option value="every-day-execution-option">Every Day</option>
                            <option value="every-week-day-execution-option">Every Week Day (Monday - Friday)</option>
                            <option value="selected-days-week-execution-option">Selected Days of Week</option>
                            <option value="every-month-execution-option">Every Month</option>
                        </select>
                    </div>

                    <div class="col-md-12 col-lg-6 px-0">
                        <div class="col-md-4 col-lg-6 col-xl-3 reccurent-option-row d-none d-flex" id="every-day-execution-option">
                            <input type="text" class="form-control" id="everyDayTimePicker" placeholder="Pick Time"/>
                        </div>

                        <div class="col-md-4 col-lg-6 col-xl-3 reccurent-option-row d-none" id="every-week-day-execution-option">
                            <input type="text" class="form-control" id="everyWeekDayTimePicker" placeholder="Pick Time"/>
                        </div>

                        <div class="col-xs-12 col-lg-8 col-xl-5 px-0 px-md-0 pt-2 pt-md-2 pt-lg-0 reccurent-option-row d-none" id="selected-days-week-execution-option">
                            <div class="col-xs-12 col-md-3 col-lg-6">
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="monday" id="monday">
                                    <label class="form-check-label" for="monday">Monday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="tuesday" id="tuesday">
                                    <label class="form-check-label" for="tuesday">Tuesday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="wednesday" id="wednesday">
                                    <label class="form-check-label" for="wednesday">Wednesday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="thursday" id="thursday">
                                    <label class="form-check-label" for="thursday">Thursday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="friday" id="friday">
                                    <label class="form-check-label" for="friday">Friday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="saturday" id="saturday">
                                    <label class="form-check-label" for="saturday">Saturday</label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input type="checkbox" class="form-check-input" name="sunday" id="sunday">
                                    <label class="form-check-label" for="sunday">Sunday</label>
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-3 col-lg-6" id="selectedDaysTimePickerParent">
                                <input type="text" class="form-control" id="selectedDaysTimePicker" placeholder="Pick Time"/>
                            </div>
                        </div>

                        <div class="col-xs-12 col-lg-11 col-xl-8 pt-2 pt-lg-0 px-0 px-md-0 reccurent-option-row flex-column flex-md-row d-none" id="every-month-execution-option">
                            <div class="col-12 col-md-4 col-lg-6 d-flex px-0 px-md-0">
                                <div class="col-3 reccurent-option-row__item">
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="1" id="month-day-1">
                                        <label class="form-check-label" for="month-day-1">1</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="2" id="month-day-2">
                                        <label class="form-check-label" for="month-day-2">2</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="3" id="month-day-3">
                                        <label class="form-check-label" for="month-day-3">3</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="4" id="month-day-4">
                                        <label class="form-check-label" for="month-day-4">4</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="5" id="month-day-5">
                                        <label class="form-check-label" for="month-day-5">5</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="6" id="month-day-6">
                                        <label class="form-check-label" for="month-day-6">6</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="7" id="month-day-7">
                                        <label class="form-check-label" for="month-day-7">7</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="8" id="month-day-8">
                                        <label class="form-check-label" for="month-day-8">8</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="9" id="month-day-9">
                                        <label class="form-check-label" for="month-day-9">9</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="10" id="month-day-10">
                                        <label class="form-check-label" for="month-day-10">10</label>
                                    </div>
                                </div>
                                <div class="col-3 reccurent-option-row__item">
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="11" id="month-day-11">
                                        <label class="form-check-label" for="month-day-11">11</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="12" id="month-day-12">
                                        <label class="form-check-label" for="month-day-12">12</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="13" id="month-day-13">
                                        <label class="form-check-label" for="month-day-13">13</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="14" id="month-day-14">
                                        <label class="form-check-label" for="month-day-14">14</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="15" id="month-day-15">
                                        <label class="form-check-label" for="month-day-15">15</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="16" id="month-day-16">
                                        <label class="form-check-label" for="month-day-16">16</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="17" id="month-day-17">
                                        <label class="form-check-label" for="month-day-17">17</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="18" id="month-day-18">
                                        <label class="form-check-label" for="month-day-18">18</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="19" id="month-day-19">
                                        <label class="form-check-label" for="month-day-19">19</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="20" id="month-day-20">
                                        <label class="form-check-label" for="month-day-20">20</label>
                                    </div>
                                </div>
                                <div class="col-3 reccurent-option-row__item">
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="21" id="month-day-21">
                                        <label class="form-check-label" for="month-day-21">21</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="22" id="month-day-22">
                                        <label class="form-check-label" for="month-day-22">22</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="23" id="month-day-23">
                                        <label class="form-check-label" for="month-day-23">23</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="24" id="month-day-24">
                                        <label class="form-check-label" for="month-day-24">24</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="25" id="month-day-25">
                                        <label class="form-check-label" for="month-day-25">25</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="26" id="month-day-26">
                                        <label class="form-check-label" for="month-day-26">26</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="27" id="month-day-27">
                                        <label class="form-check-label" for="month-day-27">27</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="28" id="month-day-28">
                                        <label class="form-check-label" for="month-day-28">28</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="29" id="month-day-29">
                                        <label class="form-check-label" for="month-day-29">29</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="30" id="month-day-30">
                                        <label class="form-check-label" for="month-day-30">30</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input" name="monthly_days" value="last" id="month-day-last">
                                        <label class="form-check-label form-check-label--last-date" for="month-day-last">Last date of the month</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6 col-md-4 col-lg-4" id="everyMonthTimePickerParent">
                                <input type="text" class="form-control" id="everyMonthTimePicker" placeholder="Pick Time"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="status" class="col-12 col-form-label">Status</label>
                    <div class="col-xs-12 col-lg-3">
                        <select class="form-control selectpicker" id="status">
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-12 col-form-label col-form-label--simple">Execution Report:</label>
                    <div class="col-xs-12 col-lg-6 d-flex flex-column flex-lg-row">
                        <label for="file-upload" class="label-file-upload">
                            <span>Browse</span>
                            <input type="file" name="execution_report" id="file-upload" class="input-file-upload" accept=".xls,.xlsx,.csv"/>
                        </label>
                        <span class="uploadFileName"></span>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <div class="col-12 d-flex">
                        <button type="submit" class="btn btn--dark-red d-flex justify-content-center align-items-center">
                            {{ __('client.buttons.save') }}
                        </button>
                        <button type="button" onclick="window.location='{{route('client.clients')}}'" class="btn btn--cancel d-flex justify-content-center align-items-center">
                            {{ __('client.buttons.cancel') }}
                        </button>
                    </div>
                </div>


            </form>
        </div>
    </div>
</div>
@endsection
@section('custom_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#order-date').datetimepicker({
                timepicker:false,
                validateOnBlur:true,
                minDate:new Date(),
                format:'d.m.Y',
                parentID:'#order-datetimepicker-parent'
            });

            $('#one-time-execution-datetimepicker').datetimepicker({
                validateOnBlur:true,
                minDate:new Date(),
                parentID:'#one-time-execution-datetimepicker-parent',
                step: 5
            });

            $('#everyDayTimePicker').datetimepicker({
                datepicker:false,
                parentID:'#every-day-execution-option',
                step: 5,
                format: 'H:i',
                timepicker: true
            });

            $('#everyWeekDayTimePicker').datetimepicker({
                datepicker:false,
                parentID:'#every-week-day-execution-option',
                step: 5,
                format: 'H:i',
                timepicker: true
            });

            $('#selectedDaysTimePicker').datetimepicker({
                datepicker:false,
                parentID:'#selectedDaysTimePickerParent',
                step: 5,
                format: 'H:i',
                timepicker: true
            });

            $('#everyMonthTimePicker').datetimepicker({
                datepicker:false,
                parentID:'#everyMonthTimePickerParent',
                step: 5,
                format: 'H:i',
                timepicker: true
            });
        })
    </script>
@endsection