@extends('ui::layouts.app')

@push('style')
    <link href="{{ asset('web/vendor/fullcalendar/fullcalendar.min.css') }}" rel="stylesheet">
    <link href="{{ asset('web/vendor/fullcalendar/fullcalendar.print.min.css') }}" rel="stylesheet" media='print'>

    <style type="text/css">
        .aqua-custom {
            background: linear-gradient(-45deg, #00d2ff 0%, #3a47d5 100%) !important;
        }

        .red-custom {
            background: linear-gradient(-45deg, #daae51 0%, #d53369 100%) !important;
        }

        .orange-custom {
            background: linear-gradient(-45deg, #fcff9e 0%, #c67700 100%) !important;
        }

        .green-custom {
            background: linear-gradient(-45deg, #6a6b5f 0%, #b9b4ad 100%) !important;
        }

        .yellow-custom {
            background: linear-gradient(-45deg, #c5b617 0%, #f6f309 100%) !important;
        }
    </style>
@endpush

@section('content')
    <div class="ui segments">
        <div class="ui segment">
            <p>Pemohonan Cuti Rehat</p>
        </div>
        <div class="ui secondary segment">
            {!! Form::post(route('mileage::apply.save', null))->id('applyForm') !!}

            <div class="ui segment">
                <div class="column">
                    <p>Maklumat Permohonan Cuti</p>
                    <div class="ui segment">
                        <div class="ui form">
                            <div class="inline field">
                                <label class="three wide field">Jumlah Kelayakan Tahun Semasa</label>
                                <input class="twelve wide field" type="text" placeholder="" value="" name="" readonly>
                            </div>
                            <div class="inline field">
                                <label class="three wide field">Cuti Dibawa Dari Tahun Lepas</label>
                                <input class="twelve wide field" type="text" placeholder="" value="" name="" readonly>
                            </div>
                            <div class="inline field">
                                <label class="three wide field">Jumlah Kelayakan</label>
                                <input class="twelve wide field" type="text" placeholder="Jumlah" name="entitlement" value="" readonly>
                                <label><a class="mini ui red tag label">Nota : Jumlah kelayakan adalah jumlah sebelum pelarasan</a>
                                    <h6></h6>
                                </label>
                            </div>
                            <div class="inline field">
                                <label class="three wide field">Baki</label>
                                <input class="twelve wide field" type="text" placeholder="" value="" name="balance" readonly>
                            </div>

                            <div class="inline field">
                                <label class="three wide field">Jumlah Permohonan Cuti Yang Belum Diluluskan</label>
                                <input class="twelve wide field" type="text" placeholder="" value="" name="" readonly>
                            </div>

                            <div class="inline field required" id="select-lv-type111">
                                <label class="three wide field">Jenis Cuti </label>
                                <select class="ui search dropdown" name="leave_type" id="select-lv-type">
                                    <option value="">Sila Pilih</option>
                                    <option value="1" selected="true">Cuti Rehat</option>
                                </select>
                            </div>
                            <div class="inline fields">
                                <label class="three wide field">Tarikh Mula Cuti<font color="red">*</font></label>
                                <div class="twelve wide field calendar" id="start_date">
                                    &nbsp;&nbsp;&nbsp;
                                    <div class="ui input left icon">
                                        <i class="calendar icon"></i>
                                        <input type="text" name="start_date" id="awal"
                                            placeholder="Tarikh Mula Cuti" required readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="inline fields" id="div_enddate">
                                <label class="three wide field">Tarikh Akhir Cuti<font color="red">*</font></label>
                                <div class="twelve wide field calendar" id="end_date">
                                    &nbsp;&nbsp;&nbsp;
                                    <div class="ui input left icon">
                                        <i class="calendar icon"></i>
                                        <input type="text" name="end_date" id="akhir" placeholder="Tarikh Akhir Cuti"
                                            readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="inline field" id="div_total_day">
                                <label class="three wide field">Jumlah Hari Bercuti</label>
                                <input class="twelve wide field" id="total_day" name="total_day" type="text"
                                    placeholder="">
                            </div>
                            <div class="inline field" id="total_day_new"></div>
                            <div class="inline field">
                                <label class="three wide field">Alasan Bercuti<font color="red">*</font></label>
                                <input class="twelve wide field" name="reason" type="text" placeholder="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="ui button" id="btn_hantar" type="submit" onclick="block()">Seterusnya</button>

            <div class="ui segment">
                <div class="column">
                    <p>Senarai Nama Penyokong dan Pelulus Pegawai Pemohon Cuti</p>

                    <div class="ui two column stackable grid">
                        <div class="column">
                            <div class="ui tertiary inverted red segment">
                                <div class="ui ">
                                    <p>Penyokong Cuti</p>
                                    <p></p>
                                    <p></p>

                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="ui tertiary inverted red segment">
                                <div class="ui ">
                                    <p>Pelulus Cuti</p>
                                    <p></p>
                                    <p></p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {!! Form::close() !!}

        </div>
    </div>

@endsection

@push('script')
    <script src="{{ asset('web/vendor/fullcalendar/lib/moment.min.js') }}"></script>
    <script src="{{ asset('web/vendor/fullcalendar/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('web/vendor/fullcalendar/locale/ms-my.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>

    <script>
        $(document).ready(function() {



        });

        function block() {
            $.blockUI({
                message: 'Sila Tunggu'
            });
            setTimeout(unBlock, 8000);
        }
    </script>
@endpush
