@extends('layouts.admin')
@section('content')

<section class="rightside-main">
    <div class="container-fluid">
        @if (Session::has('success'))
        <p class="alert alert-success">{{ Session::get('success') }}</p>
        @endif
        <div class="page-top">
            <div class="page-header borderless ">
                <h4>Manage Weekly Errors</h4>
            </div>
            <div class="page-berdcrumb">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <i class="fa fa-home"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#">Weekly Errors</a>
                    </li>
                </ul>
            </div>
        </div>
        {{-- <div class="row mt-5">
                <div class="col-md-2">
                    <input type="date" name="from_date" id="from_date" class="form-control ">
                </div>
                <div class="col-md-2">
                    <input type="date" name="to_date" id="to_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <button id="filterBtn" class="btn btn-info btn-xs">Filter</button>
                </div>
            </div> --}}

        <div class="text-right">
            <a href="javascript:void(0);" data-toggle="modal" data-target="#errorDateModal" class="btn btn-primary">Add</a>
        </div>
        <div class="card table-card ">
            <div class="row card-header borderless ">
                <div class="col-md-8 col-lg-8">
                    <h3> Details</h3>
                </div>

            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-lg-12 col-md-12 table-responsive">
                        <table id="data_table1" class="table cell-border table-bordered compact hover order-column row-border stripe">
                            <thead>
                                <tr>
                                    <th scope="col">S.No.</th>
                                    <th>Load Id</th>
                                    <th>User</th>
                                    <th>Error/Comment</th>
                                    <th>Week</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($results))
                                @php
                                $i = 1;
                                @endphp
                                @foreach ($results as $result)
                                <tr>
                                    <td>{{ $i }}</td>
                                    <td>{{ $result->load_id }}</td>
                                    <td>{{ $result->user }}</td>
                                    <td>{{ $result->error }}</td>
                                    <td>{{ $result->start_date }} |
                                        {{ $result->end_date }}
                                    </td>
                                    <td><a href="javascript:void(0);" data-toggle="modal" data-target="#editErrorModal_{{ $result->id }}" class="btn btn-primary btn-sm" data-id="{{ $result->id }}">Edit
                                        </a>
                                        <a href="{{ url('delete-weekly-errors', $result->id) }}" onclick="return confirm(' you want to delete?');" class="btn btn-danger btn-sm">Delete
                                        </a>
                                    </td>
                                    <!-- Edit Model-->
                                    <div class="modal fade" id="editErrorModal_{{ $result->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2" aria-hidden="true">
                                        <div class="modal-dialog" style="margin-top: 100px" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title" id="exampleModalLabe3">Edit
                                                        Error/Comment</h4>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <form name="error_form" method="post" action="{{ url('update-weekly-errors') }}">
                                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                    <input type="hidden" name="id" value="{{ $result->id }}">
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label class="form-label" for="user">User</label>
                                                            <select name="select_user" class="form-control">
                                                                <option value="">Select User</option>
                                                                <option value="PCG 1" {{ $result->user == 'PCG 1' ? 'selected' : '' }}>
                                                                    PCG 1</option>
                                                                <option value="PCG 2" {{ $result->user == 'PCG 2' ? 'selected' : '' }}>
                                                                    PCG 2</option>
                                                                <option value="PCG 3" {{ $result->user == 'PCG 3' ? 'selected' : '' }}>
                                                                    PCG 3</option>
                                                                <option value="PCG 4" {{ $result->user == 'PCG 4' ? 'selected' : '' }}>
                                                                    PCG 4</option>
                                                                <option value="PCG 5" {{ $result->user == 'PCG 5' ? 'selected' : '' }}>
                                                                    PCG 5</option>
                                                                <option value="PCG 6" {{ $result->user == 'PCG 6' ? 'selected' : '' }}>
                                                                    PCG 6</option>
                                                                <option value="PCG 7" {{ $result->user == 'PCG 7' ? 'selected' : '' }}>
                                                                    PCG 7</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="form-label" for="load_id"> Load
                                                                Id</label>
                                                            <input type="text" name="load_id" id="load_id" class="form-control" placeholder="Load Id" value="{{ $result->load_id }}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="form-label" for="error_comment">
                                                                Error/Comment</label>
                                                            <textarea name="error_comment" id="error_comment" class="form-control" placeholder="Error/Comment">{{ $result->error }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Update</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </tr>
                                @php $i++; @endphp
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($results->hasPages())
                <div class="pagination-wrapper">
                    {{ $results->links('pagination::bootstrap-4') }}
                </div>
                @endif
            </div>
        </div>
    </div>
    </div>
</section>

<!--Add  Modal -->
<div class="modal fade" id="errorDateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Add Error/Comment</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form name="error_form" method="post" action="{{ url('add-weekly-errors') }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="user">User</label>
                        <select name="select_user" class="form-control">
                            <option value="">Select User</option>
                            <option value="PCG 1">PCG 1</option>
                            <option value="PCG 2">PCG 2</option>
                            <option value="PCG 3">PCG 3</option>
                            <option value="PCG 4">PCG 4</option>
                            <option value="PCG 5">PCG 5</option>
                            <option value="PCG 6">PCG 6</option>
                            <option value="PCG 7">PCG 7</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="load_id"> Load Id</label>
                        <input type="text" name="load_id" id="load_id" class="form-control" placeholder="Load Id">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="error_comment"> Error/Comment</label>
                        <textarea name="error_comment" id="error_comment" class="form-control" placeholder="Error/Comment"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="date"> Select Week</label>
                        <input type="text" class="form-control week-picker" readonly placeholder="Select Week">
                        <input type="hidden" name="start_date" id="startDate">
                        <input type="hidden" name="end_date" id="endDate">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Week Datepicker-->


<script type="text/javascript">
    $(function() {
        var datePickePickerElement = $('<span class="dpwrapper"></span');

        var startDate;
        var endDate;

        var selectCurrentWeek = function() {
            window.setTimeout(function() {
                $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
            }, 1);
        }

        var datePickerParams = {
            autoclose: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText, inst) {
                var date = $(this).datepicker('getDate');
                startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date
                    .getDay());
                endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() +
                    6);
                var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

                var
                    // Formatted start and end date
                    startDateFormatted = $.datepicker.formatDate(dateFormat, startDate, inst.settings),
                    endDateFormatted = $.datepicker.formatDate(dateFormat, endDate, inst.settings),

                    // Date in week formatted styled
                    weekDates = (startDateFormatted + ' - ' + endDateFormatted),

                    // Reference to date picker control
                    datePickerControl = $('#' + inst.id);

                $('#startDate').val(startDateFormatted);
                $('#endDate').val(endDateFormatted);


                // Get related input ( textbox ) control and set date
                datePickerControl.prev('input').val(weekDates);

                // Destroy date picker
                datePickerControl.datepicker('destroy');

                selectCurrentWeek();
            },
            beforeShowDay: function(date) {
                var cssClass = '';
                if (date >= startDate && date <= endDate)
                    cssClass = 'ui-datepicker-current-day';
                return [true, cssClass];
            },
            onChangeMonthYear: function(year, month, inst) {
                selectCurrentWeek();
            }
        }

        $('.week-picker').click(function() {
            // Source element on clicked
            var el = $(this);
            showDatePicker(el);
        })

        $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() {
            $(this).find('td a').addClass('ui-state-hover');
        });
        $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() {
            $(this).find('td a').removeClass('ui-state-hover');
        });

        function showDatePicker(elTextBox) {

            // Place date picker control just after the textbox
            datePickePickerElement.insertAfter(elTextBox)
                .datepicker(datePickerParams)
                .datepicker('show');
        }
    });

    //----------------------------------
    $(document).ready(function() {
        $('#data_table').DataTable();
    });

    //----------------------------------
    $(window).on('beforeunload', function() {
        $('#pageLoader').show();
    });
    $(function() {
        $('#pageLoader').hide();
    });

    // $('#filterBtn').click(function() {
    //     var from_date = $('#from_date').val();
    //     var to_date = $('#to_date').val();
    //     $.ajax({
    //         url: "{{ route('admin.weekly-errors') }}",
    //         type: 'GET',
    //         data: {
    //             from_date: from_date,
    //             to_date: to_date
    //         },
    //         success: function(result) {
    //             console.log(result);
    //         },
    //     });
    // });
</script>

@endsection