@extends('layouts.app2') 
@section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.min.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.print.min.css') !!}" rel="stylesheet" media="print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<style>
    body {
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        background-color: #fff;
    }

    #calendar {
        max-width: 1050px;
        margin: 0 auto;
        background-color: white;
        width: 100%;
    }

    .h2,
    h2 {
        font-size: 1.5rem !important;
    }

    #calendar table .fc-head {
        background-color: #2bbbad!important;
        color: white;
    }

    .fc-day-header {
        height: 43px;
        font-size: 18px;
        padding-top: 16px !important;
    }

    .color_indegator {
        margin-left: 10px;
        margin-top: 2px;
        font-weight: 700;
    }

    .fc-scroller {
        height: auto !important;
        /* max-height: 350px !important; */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #agenda_d {
        /*   height: 300px;*/
        border: 1px solid #d4c8c8;
        /* padding: 39px; */
        /* padding-top: 10px;*/
        /*background-color: #17a2b8;*/
    }

    .row_pading {
        padding-right: 0px;
        padding-left: 0px;
    }

    .row_margin {
        margin-right: 0px;
        margin-left: 0px;
    }

    .card_header {
        padding: 0rem 0rem;
    }


    .dtp-btn-ok {
        background-color: #007bff;
        opacity: .7;
    }

    .dtp-btn-cancel {
        background-color: #dc3545;
        opacity: .7;
    }

    .dtp-btn-clear {
        background-color: #ffc107;
        opacity: .7;
    }




    /* fallback */

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }



    .docs-tab-content {
        position: relative;
        border: 1px solid rgba(0, 0, 0, .15);
        padding: 0;
    }

    .docs-tabs .nav-link {
        border-width: 1px 1px 0 1px;
        border-color: rgba(0, 0, 0, .15);
        border-style: solid;
        border-radius: 5px 5px 0 0;
        margin-right: 8px;
        margin-bottom: -1px;
        color: #212529;
    }


    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 26px;
    }

    .switch input {display:none;}

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }


    .df{
        display: flex;
    }

    .slider_label{
        font-size: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }    


    .border_bottom{
        border-bottom: 1px solid #e7e1e1;
        border-left: 3px solid #28a745;;
    }
    .border_left_red{
        border-left: 3px solid red;
    }   

    .show{
        border-bottom: 1px solid #e7e1e1;
    }

    .over_flow{
        overflow: hidden;
        text-align: left;
        text-decoration: none;
    }




</style>
@endsection 
@section('badcome')
<!--  <div class="badecome_div mb10">
    <div class="pb10 pt10">
         <a href="{{ url('home') }}" class="badge badge-theam p7">Home </a> <span class="badcome_line"> | </span> <a href="{{ route('meetingmanagement')}}" class="badge badge-theam p7"> Dashboard </a>
      </div>
    </div>-->
@endsection 
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="text-center border border-light p-5" id="leave_search_form" method="post">

                <p class="h4 mb-4 text-primary">Search Leave Records</p>

                <div class="form-group row">
                    <div class="col-md-3">
                        <label>District</label>
                        <select class="form-control browser-default custom-select mb-4" id="district" name="district">
                            <option value="">DISTRICT</option>
                            @foreach($districts AS $district)
                            <option value="{{$district['district_code']}}">{{$district['district_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Block</label>
                        <select class="form-control browser-default custom-select mb-4" id="block" name="block">
                            <option value="">Block</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Gaon Panchayat</label>
                        <select class="form-control browser-default custom-select mb-4" id="gp" name="gp">
                            <option value="">GP</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Approval Status</label>
                        <select class="form-control browser-default custom-select mb-4" id="approve_status" name="approve_status">
                            <option value="">Approval Status</option>
                            @foreach($leave_statuses AS $leave_status)
                            <option value="{{$leave_status['id']}}">{{$leave_status['status_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Leave Category</label>
                        <select class="form-control browser-default custom-select mb-4" id="leave_category" name="leave_category">
                            <option value="">Leave Category</option>
                            @foreach($leave_types AS $leave_type)
                            <option value="{{$leave_type['id']}}">{{$leave_type['leave_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Year</label>
                        @php
                        $year = \Carbon\Carbon::now()->year;
                        @endphp
                        <select class="form-control browser-default custom-select mb-4" id="year" name="year">
                            <option value="">Year</option>
                            @for($i = $year; $i <= $year; $i++)
                            <option value="{{$i}}">{{$i}}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Leave Session</label>
                        <select class="form-control browser-default custom-select mb-4" id="session" name="session">
                            <option value="">Leave Session</option>
                            @foreach($leave_sessions AS $leave_session)
                            <option value="{{$leave_session['id']}}">{{$leave_session['session_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-md btn-primary btn-block">SEARCH</button>
                    </div>
                </div>


            </form>
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-md-12" id="table_div">

        </div>
    </div>

</div>
@endsection 
@section('dynamic_js')
<script src="{{ asset('plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>
<script src="{{ asset('js/lib/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>
<script src="{{ asset('js/lib/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/custom/calender_minutes.js') }}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
    $(document).on('change', '#district', function () {
        $.get("{{route('leave_blocks')}}", {
            district: $(this).val()
        }, function (j) {
            var option = "<option value=''>Block</option>";
            for (var i = 1; i < j.length; i++) {
                option += "<option value='" + j[i].block_id + "'>" + j[i].block_name + "</option>";
            }
            $('#block').html(option);
        });
    });

    $(document).on('change', '#block', function () {
        $.get("{{route('leave_gps')}}", {
            block: $(this).val()
        }, function (j) {
            var option = "<option value=''>GP</option>";
            for (var i = 1; i < j.length; i++) {
                option += "<option value='" + j[i].gp_id + "'>" + j[i].gp_name + "</option>";
            }
            $('#gp').html(option);
        });
    });

</script>
<script>
    $(document).on('submit', '#leave_search_form', function (e) {
        e.preventDefault();

        swal({
            title: "Are you sure?",
            text: "You are about search employee leave data!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
                .then((willStore) => {
                    if (willStore) {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "POST",
                            url: "{{route('search_leave')}}",
                            dataType: "json",
                            data: new FormData(this),
                            contentType: false,
                            cache: false,
                            processData: false,
                            statusCode: {
                                422: function (data) {
                                    // Error...
                                    var object = "";
                                    $.each(data, function (key, val) {

                                        if (key === "responseText") {
                                            object = jQuery.parseJSON(val);
                                        }

                                    });
                                    var error = "";
                                    $.each(object.errors, function (key, val) {

                                        $('.' + key).text(val);

                                    });
                                    swal("In valid data has been provided please check!", "", "error");
                                },
                                200: function (j) {
                                    var table = '<table class="table table-bordered table-responsive" id="leave_search_table"><thead><tr><th>SL No.</th><th>Employee Code</th><th>Employee Name</th><th>Leave Start Date</th><th>Leave End Date</th><th>Leave Status</th><th>Leave Type</th><th>Leave Session</th><th>Leave Document</th><th>Leave Reason</th><th>Leave Cancel Reason</th></thead><tbody id="leave_detail_body">';
                                    var tr = "";
                                    var anchor = "";
                                    for (var i = 1; i < j.length; i++) {
                                        if(j[i].document != ""){
                                            anchor = "<a href='" + j[i].document + "' target='_blank' class='btn btn-sm btn-primary btn-rounded'><i class='fa fa-download'></i></a>";
                                        }
                                        tr += "<tr><td>" + i + "</td><td>" + j[i].employee + "</td><td>" + j[i].name + "</td><td>" + j[i].start_date + "</td><td>" + j[i].end_date + "</td><td>" + j[i].leave_status + "</td><td>" + j[i].leave_name + "</td><td>" + j[i].session + "</td><td>"+anchor+"</td><td>" + j[i].reason + "</td><td>" + j[i].cancel_reason + "</td></tr>";
                                    }
                                    table += tr + "</tbody></table>";
                                    $('#table_div').html(table);

                                },
                                500: function () {
                                    swal("Something went wrong. Please try again.", "", "warning");
                                }
                            },
                            error: function (data) {

                            },
                            success: function () {
                                swal("Search result is successfully retrieved.!", "", "success");
                                $(document).ready(function () {
                                    $('#leave_search_table').DataTable({
                                        button: [
                                            'excel',
                                            'pdf'
                                        ]
                                    });
                                });
                            }
                        });
                    } else {
                        swal("You have canceled your operation!");
                    }
                });



    });
</script>
@endsection