@include('components/header')
@include('components/sidebar')
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        @php
        $month = date('m');
        if($month > 3){

        $cur_yr = date('Y');
        $end_yr = $cur_yr + 1;
        }
        else{
        $end_yr = date('Y');
        $cur_yr = $end_yr - 1;

        }
        @endphp
        <h2>Holiday List Of {{$cur_yr}}-{{$end_yr}}</h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg> Back
                </button>
            </a>
            <div class="td-content float-right">
                <span class="btn btn-primary" data-toggle="modal" data-target="#add">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg> Add Holidays
                </span>
            </div>
        </div>
    </div>
    <div class="layout-px-spacing layout-top-spacing">
        <div class="modal-footer">
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-card-one widget-table-two">

                    <div class="widget-content search-datatable-hide">
                        <div class="filter-design">
                            <div class="col-md-6 offset-md-6 col-12">
                                <form class="form-group" method="post" action="{{route('search_holiday')}}">
                                    {{csrf_field()}}
                                    <div class="row">
                                        <div class="col-12">
                                            @php $date = date("Y"); @endphp
                                            <div
                                                class="d-sm-flex align-items-center holiday-filter justify-content-end">
                                                <div>
                                                    <select class="form-control custom-select" name="date">
                                                        @for($i=2021;$i<=$date;)
                                                            @for($j=$i+1; ;$j++)
                                                                @if(Session::get('date') !=null)
                                                                    @if(Session::get('date')==$j) 
                                                                        <option selected value="{{$j}}">
                                                                        @php echo $i ."-". $j;
                                                                            $i++;
                                                                            break;
                                                                        @endphp
                                                                        </option>
                                                                    @else
                                                                        <option value="{{$j}}">
                                                                            @php echo $i ."-". $j;
                                                                                $i++;
                                                                                break;
                                                                                @endphp
                                                                        </option>
                                                                    @endif
                                                                @else
                                                                    <option selected value="{{$j}}">
                                                                        @php echo $i ."-". $j;
                                                                            $i++;
                                                                            break;
                                                                        @endphp
                                                                    </option>
                                                                @endif
                                                            @endfor
                                                        @endfor
                                                    </select>
                                                </div>
                                                <div class="d-flex">
                                                    <button class="btn btn-primary w-100">Search</button>
                                                    @if(Session::get('date') != null)
                                                        <div class="clear-filter-icon form-group pl-3 mb-0">
                                                            <a href="/holiday">
                                                                <img src="{{asset('design/img/clearfiltericon.svg')}}">
                                                            </a>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="widget-tableContent">
                            <form action="/holiday_managment" method="post" class="form-group">
                                {{csrf_field()}}
                                <div class="table-responsive">
                                    <table id="zero-config" class="table table-striped dt-table-hover" id="standard_holiday">
                                        <thead>
                                            <tr>
                                                <th> Sr No.</th>
                                                <th> Holiday Name </th>
                                                <th> Holiday Date </th>
                                                <th> Action </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($standard_holiday as $key => $r)
                                            <tr class="text-center">
                                                <td>{{++$key}}</td>
                                                <td>
                                                    {{$r->holiday_name}}
                                                </td>
                                                <td>
                                                    {{date('d-m-Y',strtotime($r->date))}}
                                                </td>
                                                <td class="td-content">
                                                    <center>
                                                        <div class="td-content">
                                                            <a href="javascript:void(0);" class="edit" data-value="{{$r->id}}" data-toggle="modal" data-date="{{$r->date}}" data-bs-placement="top" data-target="#edit" data-name="{{$r->holiday_name}}" data-reshuffle="{{$r->reshuffle}}" data-bs-original-title="Delete" data-description="{{$r->holiday_description}}"> 
                                                                <img src="design/img/edit.svg" />
                                                            </a>
                                                            <a href="javascript:void(0);" class="delete" data-value="{{$r->id}}" data-toggle="modal" data-bs-placement="top" data-bs-original-title="Delete" data-value="{{$r->id}}" data-target="#delete" data-name="{{$r->name}}"> 
                                                                <img src="design/img/delete.svg" />
                                                            </a>
                                                        </div>
                                                    </center>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for edit holiday -->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <center>
                    <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                        <div class="media-body text-start">
                            <h5><b>Edit Holiday</b></h5>
                        </div>
                    </div>
                </center>
                <div class="modal-body">
                    <form class="form-group" method="post" action="/edit_holiday">
                        {{@csrf_field()}}
                        <input type="hidden" name="holiday_dbId" class="hidden_id">
                        <label>Holiday Name:</label>
                        <input type="text" name="edited_holiday_name" placeholder="Enter Holiday Name" class="form-control mb-2 holiday_name text" id="edit_holiday_name" value="">
                            <p class="text-danger" id="error_txt3"></p>

                        <label>Holiday Date:</label>
                        <div class="date-field-with-icon"> 
                            <input type="text" placeholder="Holiday Date" name="edited_holiday_date" class="form-control holiday_date" id="edit_holiday_date" value="">
                            <div class="date-icon">
                                <img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" />
                            </div>
                        </div>

                        <p class="text-danger" id="error_txt4"></p>
                        <label>Holiday Description:</label>
                        <textarea class="form-control" name="edited_description" id="edited_description">
                        </textarea>

                        <label>Reshuffle Date:</label>
                        <div class="date-field-with-icon"> 
                            <input type="text" placeholder="Holiday Date" name="edited_Reshuffle_date" class="form-control holiday_date reshuffle" value="">
                            <div class="date-icon">
                                <img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date" />
                            </div>
                        </div>

                        <div class="text-end mt-2">
                            <input type="submit" value="Submit" id="edit_holiday_submit" class="btn btn-success">
                            <button type="button" data-dismiss="modal" value="Cancel"
                                class="btn btn-primary ml-2 mr-0">Cancel</button>
                        </div>
                    </form>
                </div>

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

    <!-- Modal for add holiday -->
    <div class="modal fade bd-example-modal-md add-holiday-popup" id="add" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <center>
                    <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                        <div class="media-body text-start">
                            <h5><b>Add Holiday</b></h5>
                        </div>
                    </div>
                </center>
                <div class="modal-body">
                    <form class="form-group" method="post" action="/holiday_managment">
                        <div id="dynamicAddRemove">
                            {{@csrf_field()}}
                            <div class="new_holiday">
                                
                                <div class="form-group holiday-form"> 
                                    <input type="text" name="name[0]" 
                                    placeholder="Holiday Name"  class="form-control mb-2" value="">
                                    <p class="text-danger" id="error_txt3"></p>
                                </div>
                                <div class="form-group holiday-form">
                                    <div class="date-field-with-icon">
                                        <input type="text" placeholder="Holiday Date" name="date[0]" class="form-control holiday_date " value="">
                                        <div class="date-icon">
                                            <img src="{{asset('design/img/date-icon.svg')}}" alt="date" />
                                        </div>
                                    </div>
                                    <p class="text-danger" id="error_txt4"></p>
                                </div>
                                <div class="form-group holiday-form">                                  
                                    <textarea class="form-control" rows="2" cols="4" style="resize:none;"
                                    placeholder="Holiday Description"  name="edited_description" id="description[0]"></textarea>
                                </div>
                                <div class="form-group holiday-form reshuffle d-none">
                                    <div class="date-field-with-icon">
                                        <input type="text" placeholder="Reshuffle Date" name="reshuffle_date[0]" class="form-control holiday_date reshuffle_date" value="">
                                        <div class="date-icon">
                                            <img src="{{asset('design/img/date-icon.svg')}}" alt="date" />
                                        </div>
                                    </div>
                                    <p class="text-danger" id="error_txt4"></p>
                                </div>
                                <div class="d-flex justify-content-between holiday-reshuffle">
                                <div class="form-check">
                                    <input class="form-check-input reshuffle_input" type="checkbox" value="">
                                    <label class="form-check-label">
                                       Reshuffle holiday
                                    </label>
                                    </div>
                                    <div class="form-group holiday-form">
                                        <a href="#"  id="add_holiday">+ Add more </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-end mt-2">
                            <input type="submit" value="Submit" class="btn btn-success" id="holiday_submit">
                            <button type="button" data-dismiss="modal" value="Cancel" class="btn btn-primary ml-2 mr-0" id="holiday_submit_cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <center>
                    <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                        <div class="media-body text-start">
                            <h5><b>Are you sure you want to delete this Holiday ?</b></h5>
                        </div>
                    </div>
                </center>
                <div class="modal-body">
                    <form class="form-group" method="post" action="/delete_holiday">
                        {{@csrf_field()}}
                        <input type="hidden" name="id" class="delete_id">
                        <div class="text-end">
                            <input type="submit" name="wish" value="Delete" class="btn btn-success">
                            <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary ml-2 mr-0">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if(session('done'))
    <script type="text/javascript">
        swal.fire({
            title: '@php echo session("done")@endphp',
            type: 'success',
            padding: '2em'
        });
    </script>
    @elseif(session('edit'))
    <script type="text/javascript">
        swal.fire({
            title: '@php echo session("edit")@endphp',
            type: 'success',
            padding: '2em'
        });
    </script>
    @elseif(session('delete'))
    <script type="text/javascript">
        swal.fire({
            title: '@php echo session("delete")@endphp',
            type: 'success',
            padding: '2em'
        });
    </script>
    @elseif(session('error'))
    <script type="text/javascript">
        swal.fire({
            title: '@php echo session("error")@endphp',
            type: 'success',
            padding: '2em'
        });
    </script>
    @endif
    @include('components/footer')

    <script>

        $(".holiday_date").datepicker({
            dateFormat: "dd/mm/yy"
        })

        $('.delete').click(function () {
            var id = $(this).data('value');
            var name = $(this).data('name');
            $('.delete_id').val(id);
            $('.delete_name').val(name);
        });
        // GET DATA ON FOR EDIT HOLIDAY
        $(".edit").on('click', function () {
            var db_id = $(this).data('value');
            var name = $(this).data('name');
            var date = $(this).data('date');
            var reshuffle = $(this).data('reshuffle');
            var description = $(this).data('description');
            var date = new Date(date);
            $(".holiday_date").val(moment(date).format("DD/MM/YYYY"));
            $(".hidden_id").val(db_id);
            $(".holiday_name").val(name);
            $(".reshuffle").val(reshuffle);
            $("#edited_description").val(description);
        });

        // check add holiday filed required validation
        $("#holiday_submit").on('click', function (event) {
            var errorsFound = false;
            $(".new_holiday").each(function(){
                var reshuffleCheckbox = $(this).find(".reshuffle_input");
                var reshuffleInput = $(this).find(".reshuffle .reshuffle_date");

                if (reshuffleCheckbox.is(":checked") && reshuffleInput.val().trim() === '') {
                    errorsFound = true;
                    var nearestPTag = $(this).find("p");
                    nearestPTag.text("This field is required");
                } else {
                    var nearestPTag = $(this).find("p");
                    nearestPTag.text(" ");
                }

                $(this).find("input").not(".reshuffle_date, .reshuffle_input").each(function(){
                    if($(this).val().trim() === '') {
                        errorsFound = true;
                        var nearestPTag = $(this).parents(".holiday-form").find("p");
                        nearestPTag.text("This field is required");
                    } else {
                        var nearestPTag = $(this).parents(".holiday-form").find("p");
                        nearestPTag.text(" ");
                    }
                });
            });
            if (errorsFound == true) {
                event.preventDefault();
            } else {
                $("#holiday_submit").unbind();
            }
        });

        $("#holiday_submit_cancel").on('click', function () {
            $(".new_holiday").each(function(){
                $(this).find("input").each(function(){
                    $(this).val("");
                })
            })
        })
        $("#edit_holiday_submit").on('click', function (event) {
            if ($("#edit_holiday_name").val().trim() == '') {
                $("#error_txt3").text("This field is required*");
                event.preventDefault();
            }
            if ($("#edit_holiday_date").val() == '') {
                event.preventDefault();
                $("#error_txt4").text("This field is required*");
            }
        });
        var i = 0;
        $("#add_holiday").on('click', function () {
            ++i;
            $("#dynamicAddRemove").append('<div class="new_holiday"><div class="form-group holiday-form">  <input type="text" name="name['+i+']"  placeholder="Holiday Name"  class="form-control mb-2" value=""> <p class="text-danger" id="error_txt3"></p> </div> <div class="form-group holiday-form"> <div class="date-field-with-icon">  <input type="text" placeholder="Holiday Date" name="date['+i+']" class="form-control holiday_date" value=""> <div class="date-icon"> <img src="{{asset("design/img/date-icon.svg")}}" alt="date" /> </div> </div> <p class="text-danger" id="error_txt4"></p>  </div> <div class="form-group holiday-form"> <textarea class="form-control" rows="2" cols="4" style="resize:none;" placeholder="Holiday Description" name="edited_description" id="description['+i+']"></textarea>  </div> <div class="form-group holiday-form reshuffle d-none"> <div class="date-field-with-icon"> <input type="text" placeholder="Reshuffle Date" name="reshuffle_date['+i+']" class="form-control holiday_date reshuffle_date" value=""> <div class="date-icon"> <img src="{{asset("design/img/date-icon.svg")}}" alt="date" /> </div> </div> <p class="text-danger" id="error_txt4"></p>  </div>  <div class="d-flex justify-content-between holiday-reshuffle">  <div class="form-check"> <input class="form-check-input reshuffle_input" type="checkbox" value=""> <label class="form-check-label"> Reshuffle holiday </label> </div> <div class="form-group holiday-form"> <a href="#" class="remove-tr">- Remove </a> </div></div></div></div>');
            $(".holiday_date").datepicker({
                dateFormat: "dd/mm/yy"
            })
        });

        $(document).on('click', '.remove-tr', function () {
            $(this).parents('.new_holiday').remove();
        });

        $(document).on('click', '.remove-tr', function () {
            $(this).parents('.holiday-form').remove();
        });

        $(document).on('click','.reshuffle_input',function(){
            $(this).parents(".new_holiday").find(".reshuffle").toggleClass("d-none");
        })
    </script>