<?
    $title = "Booking";
    date_default_timezone_set("Asia/Jakarta");

    if(isset($userBookings)){
        $id = $userBookings[0]->id;
        $date = $userBookings[0]->appointment_date;
        $strNama = $userBookings[0]->name;
        $strStatus = $userBookings[0]->status;
    }else{
        $id = '';
        $date = '';
        $strNama = '';
        $strStatus = '';
    }
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Bootstrap + Creative Studio main styles -->
    	<link rel="stylesheet" href="assets/css/creative-studio.css">
    
        @include('admin/ar-css')
        
        <!-- core  -->
        <script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
    </head>

    <body>
    @include('admin/header_admin')
    
        <div class="container">
            <div style="text-align:center;padding:20px"><h5>Book Appointment</h5></div>
    
            <form action="/booking" method="post" style="margin:0 auto;max-width:400px">
                @csrf
                <input type="hidden" name="id" value="{{$id}}">
                <input type="hidden" name="source" value="booking">
    
                <div class="form-group">
                    <label>Customer :</label> 
                    <select id="cust_id" name="cust_id">
                        <option value="0" selected>Pilih Customer</option>
                        @if($userBookings != null)
                            @foreach($customers as $customer)
                                @if($customer->name == $strNama)
                                    <option value="{{$customer->id}}" selected>{{$customer->name}}</option>
                                @else
                                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                                @endif
                            @endforeach
                        @else
                            @foreach($customers as $customer)
                                <option value="{{$customer->id}}">{{$customer->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
    
                <div class="form-group">
                    <label>Pilih Tanggal :</label>
                    <input class="form-control" id="date" name="date" type="date" value="<?=$date?>" required>
                </div>
                    
                <div class="form-group">
                    <label>Pilih waktu :</label>
                    <div id="radio-appointments"></div>
                </div>
                    
                <div class="form-group">
                    @if($strStatus == 1)
                        <input type="checkbox" id="approval" name="approval" value="Approved" checked><label>&nbspWaktu telah dikonfirmasi</label>
                    @else
                        <input type="checkbox" id="approval" name="approval" value="Approved"><label>&nbspWaktu telah dikonfirmasi</label>
                    @endif
                </div>
    
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" onclick="return bookingCheckSubmit()">Simpan</button>
                    <button class="btn btn-secondary" onclick="window.history.back();return false">Cancel</button>
                </div>        
            </form>
    
        </div>
        
        @include('admin/ar-script')
        <script>
            $(document).ready(function () {
                $('#radio-appointments').html('Silahkan pilih tanggal terlebih dahulu.');
                
                var tanggal = "<?php echo($date)?>";
    
                if(tanggal != ''){
                    loadAppointments(tanggal);
                }
                
                $('body').on('change', '#date', function () {
                    var date = new Date(this.value);
                    var selectedDate = new Date(date.getYear(),date.getMonth(),date.getDate());
                    var date = new Date();
                    var currentDate = new Date(date.getYear(),date.getMonth(),date.getDate());
        
                    $('#radio-appointments').html('Loading...');
                    if(selectedDate.getTime() < currentDate.getTime()){
                        $('#radio-appointments').html('<a style="color:red">Pilihan waktu tidak tersedia!</a>');
                    }else{
                        var date = this.value;
                        loadAppointments(date);
                    }
                });
                
            });
            
            function bookingCheckSubmit(){
                var data = document.getElementById("cust_id").value;
                if(data == 0){
                    alert("Anda belum memilih customer!");
                    return false;
                }
    
                var data = document.getElementById("date").value;
                if(data == ''){
                    alert("Anda belum menentukan tanggal pelaksanaan!");
                    return false;
                }
                
                let radios = document.querySelectorAll('input[name="time_sheet"]:checked');
                let radioValues = [];
                radios.forEach((radio)=>{
                    radioValues.push(radio.value);                
                });
                if(radioValues.length == 0){
                    alert('Waktu pelaksanaan belum di isi!');
                    return false;
                }
                
                return true;
            }
    
        </script>
        
    </body>
</html>