@extends('layouts.index')
@section('title')
    Buat Janji
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('back') }}/css/jquery.datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        label.error {
            color: #F94687;
            font-size: 13px;
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.5;
            margin-top: 5px;
            padding: 0;
        }
    
            input.error {
                color: #F94687 !important;
                border: 1px solid #F94687;
            }

        .gambar-testi{
            width: 25%;
        }
      </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Buat Janji
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Buat Janji Pelanggan</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>Semua Janji</h4>
                        </div>

                        <div id="tableLoad">
                            @csrf
                            @include('buat_janji.table_load')
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

    <!-- update Modal -->
    <div class="modal fade" id="updatemodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Ubah Janji
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('buat-janji.update', '') }}" enctype="multipart/form-data" id="editTestimonial">
                        @csrf
                        @method('PUT')
                        <div class="form-group mb-3">
                            <label for="">Nama</label>
                            <input type="text" class="form-control" placeholder="Masukkan nama"
                                aria-label="name" id="nama_edit" name="edit_nama" />
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Nomor Whatsapp</label>
                            <input type="text" class="form-control" placeholder="Masukan nomor whatsapp"
                                aria-label="name" id="no_wa_edit" name="edit_no_wa" />
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Jadwal</label>
                            <input id="datetimepicker" class="form-control" type="text" name="jadwal_edit">
                        </div>
                        <div class="form-group">
                            <label for="">Status</label>
                            <select name="status" class="form-control" id="status">
                                <option value="Y">Proses</option>
                                <option value="T">Selesai</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Update
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
    <script src="{{ asset('back/js/jquery.datetimepicker.full.min.js') }}"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>


    {{-- Pagination --}}
    <script>
        $(document).ready(function(){
            $(document).on('click', '.page-link', function(event){
                event.preventDefault(); 
                var page = $(this).attr('href').split('page=')[1];
                loadTable(page);
            });
            
            function loadTable(page) {
                var _token = "{{ csrf_token() }}";
                $.ajax({
                    url:"{{ route('buat-janji.load-table') }}",
                    method:"POST",
                    data:{_token:_token, page:page},
                    success:function(data) {
                            $('#tableLoad').html(data);
                    }
                });
            }
        });
    </script>

    <script>
        const updateLink = $('#editTestimonial').attr('action');
        

        function listUpdate(item, foto_testimoni) {
            let testimoni = item.isi;
            // console.log(testimoni);
            $('#editTestimonial').attr('action',  `${updateLink}/${item.id}`);
            $('#status').val([item.status]).trigger('change');
            $('[name="edit_nama"]').val(item.nama);
            $('[name="edit_no_wa"]').val(item.no_wa);

            jQuery('#datetimepicker').datetimepicker({
                minDate: 0,
                value: item.jadwal,
                step: 30,
                minTime:'10:00',
                maxTime: '17:00'
            }).setLocale('id');

            validateEdit(item.id);
        }
    </script>

    <script>
        function hapus(dataId) {
            Swal.fire({
                title: "Hapus Janji?",
                text: `Data janji akan dihapus. Anda tidak akan dapat mengembalikan
                    aksi ini!`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonColor: "rgb(249, 70, 135)",
                cancelButtonColor: "rgb(209, 207, 207)",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal"
            }).then(function (t) {
                if (t.value) {
                    $.ajax({
                        url: "{{ route('buat-janji.hapus') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            janji_id: dataId
                        },
                        success: function (data) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Janji telah berhasil dihapus!',
                            }).then(function(){
                                location.reload();
                            });
                        }
                    });
                }
            })
        }
    </script>
@endsection