@extends('admin.template.layout')

@section('css')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<!-- ESRI Leaflet JS -->
<script src="https://unpkg.com/esri-leaflet@3.0.11/dist/esri-leaflet.js"></script>

<!-- ESRI Leaflet Geocoder CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css" />
<script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"></script>
@endsection

@section('page-title')
@endsection

@section('content')
    <!--begin::Tables Widget 13-->
    <div class="card mb-5 mb-xl-8">

        <form action="" method="POST" id="myForm">
            <div class="">
                <div class="card-header border-0">
                    <div class="card-title">
                        Tabel Hari Kerja
                    </div>
                </div>
                <div class="card-body">
                    @csrf
                    <div class="col-xxl-12">
                        <div class="col-sm-2">
                            <label class="form-label" for="late_tolerance">Toleransi Keterlambatan</label>
                            <div class="input-group mb-5">
                                <input type="number" name="late_tolerance" value="{{ $option->late_tolerance }}" id="late_tolerance" class="form-control" placeholder="Toleransi Keterlambatan"/>
                                <span class="input-group-text" id="basic-addon2">menit</span>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-row-bordered gy-5 gs-5">
                                <thead>
                                    <tr class="fw-bold fs-6 text-muted border-bottom border-gray-200">
                                        <th>Hari</th>
                                        <th>Tipe</th>
                                        <th>Jam Masuk</th>
                                        <th>Jam Keluar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data as $item)
                                        <tr>
                                            <td>
                                                <input type="hidden" name="day_name[]" value="{{ $item['day'] }}">
                                                <div class="fw-bold">
                                                    {{ $item['day_name'] }}
                                                </div>
                                            </td>
                                            <td>
                                                <select class="form-select" name="is_workday[]" id="is_workday-{{ $loop->index }}">
                                                    <option value="1" {{ $item['is_workday'] == 1 ? 'selected' : '' }}>Ya</option>
                                                    <option value="0" {{ $item['is_workday'] == 0 ? 'selected' : '' }}>Tidak</option>
                                                </select>
                                            </td>
                                            <td><input class="form-control input-time" type="text" name="start_time[]" id="start_time-{{ $loop->index }}" value="{{ $item['start_time'] }}"></td>
                                            <td><input class="form-control input-time" type="text" name="end_time[]" id="end_time-{{ $loop->index }}" value="{{ $item['end_time'] }}"></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col d-flex flex-column">
                    <div class="card-footer">
                        <button type="button" id="btn-submit" class="btn btn-primary btn-submit">Simpan</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        $(".input-time").flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true,
        });
        function resetErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
        }

        function setErrors(errors) {

            resetErrors();
            $.each(errors, function(index, value) {
                $("#" + index + "-form").addClass('is-invalid');
                $("#" + index + "-form").after(`<div class="invalid-feedback">` + value + `</div>`);
            });
        }

        $(document).ready(function() {
            // The DOM elements you wish to replace with Tagify
            var input1 = document.querySelector("#kt_tagify_1");

            // Initialize Tagify components on the above inputs
            new Tagify(input1);
            $(".time_picker").flatpickr({
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
            });
            $('.btn-submit').on('click', function(e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Apakah anda yakin ingin menyimpan data?',
                    text: "Data akan tersimpan ke dalam database",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Menyimpan data',
                            text: 'Silahkan tunggu...',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                        });
                        Swal.showLoading();
                        var formData = new FormData($('#myForm')[0]);
                        formData.append('_token', '{{ csrf_token() }}');

                        $.ajax({
                            url: '{{ route('master-setting-hari-kerja.update') }}',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                Swal.close();
                                console.log(response);

                                if (response.status == 'error') {
                                    Swal.fire({
                                        title: "Error!",
                                        text: response.message,
                                        icon: "error"
                                    });
                                    return;
                                }

                                Swal.fire({
                                    title: "Success!",
                                    text: "Berhasil Menyimpan Data",
                                    icon: "success"
                                }).then(function() {
                                    window.location =
                                        '{{ route('master-setting-hari-kerja.index') }}';
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    title: "Error!",
                                    text: "Gagal Menyimpan Data",
                                    icon: "error"
                                });
                            }
                        });
                    }
                });
            });


        });
    </script>
@endsection