@extends('panel.master')

@section('content')
<div class="container">
    <h1>ثبت درخواست مرخصی جدید</h1>
    
    <form action="{{ route('leave-requests.store') }}" method="POST">
        @csrf
        
        <div class="mb-3">
      
            @component('components.datetime', ['name' => 'start_date', 'col' => '6', 'placeholder' => 'از تاریخ', 'id' => 'datedd1', 'label' => 'تاریخ', 'required' => 'true'])@endcomponent
        </div>
        
    
    
        <div class="mb-3">
            <label for="type2" class="form-label">نوع مرخصی</label>
            <select class="form-select" id="type2" name="end_date" required>
                <option >نیم روز صبح</option>
                <option >نیم روز عصر</option>
                <option >تمام روز</option>
              
            </select>
        </div>
        <div class="mb-3">
            <label for="type" class="form-label">نوع مرخصی</label>
            <select class="form-select" id="type" name="type" required>
                <option >مرخصی سالانه</option>
                <option >مرخصی  ساعتی</option>
                <option >مرخصی بدون حقوق</option>
                <option>سایر</option>
            </select>
        </div>
        
        <div class="mb-3">
            <label for="reason" class="form-label">دلیل مرخصی</label>
            <textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
        </div>
            @component('components.datetime', ['name' => 'end_date', 'col' => '6', 'placeholder' => 'تا تاریخ', 'id' => 'datedd2', 'label' => 'تاریخ', 'required' => 'true'])@endcomponent
        <button type="submit" class="btn btn-primary">ثبت درخواست</button>
    </form>
</div>
@endsection
@section('extrajs')
    <script>
     
   const yesTime10 = [
    'datedd1',
    'datedd۲',
];
      
      yesTime10.forEach((id) =>$(`#${id}`).persianDatepicker({
     months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],
        dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
        shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
        showGregorianDate: !1,
        persianNumbers: !0,
        formatDate: "YYYY-0M-0D 0h:0m",
        selectedBefore: !1,
        selectedDate: null,
        startDate: null,
        endDate: null,
        prevArrow: '\u25c4',
        nextArrow: '\u25ba',
        theme: 'latoja',
        alwaysShow: !1,
        selectableYears: null,
        selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        cellWidth: 25, // by px
        cellHeight: 20, // by px
        fontSize: 13, // by px                
        isRTL: !1,
        calendarPosition: {
            x: 0,
            y: 0,
        },
        onShow: function () { },
        onHide: function () { },
        onSelect: function () { },
        onRender: function () { }
}));
        
    </script>
@stop