@extends('layouts.app')

@section('title', 'Create Booking')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Create Booking</div>
                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="POST" action="{{route('backend.bookings.store',$car)}}">
                            @csrf
                            <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                <label for="name" class="col-md-4 control-label">Name</label>
                                <div class="col-md-11">
                                    <input id="name" type="text" class="form-control" name="name" value="{{ old('name',$user->name) }}" disabled autofocus>

                                    @if ($errors->has('name'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                                <div class="col-md-11">
                                    <input id="email" type="email" class="form-control" name="email" value="{{ old('email',$user->email) }}" disabled>

                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }}">
                                <label for="phone" class="col-md-4 control-label">Phone</label>

                                <div class="col-md-11">
                                    <input id="email" type="text" class="form-control" name="phone" value="{{ old('phone',$user->phone) }}" disabled>

                                    @if ($errors->has('phone'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('phone') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('start_date') ? ' has-error' : '' }}">
                                <label for="start_date" class="col-md-4 control-label">Start Date</label>

                                <div class="col-md-11">
                                    <input id="start_date" type="datetime-local" class="form-control" name="start_date" value="{{ old('start_date') }}" autofocus autocomplete="start_date">

                                    @if ($errors->has('start_date'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('start_date') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('end_date') ? ' has-error' : '' }} mb-2">
                                <label for="end_date" class="col-md-4 control-label">End date</label>

                                <div class="col-md-11">
                                    <input id="end_date" type="datetime-local" class="form-control" name="end_date" value="{{ old('end_date') }}" autocomplete="end_date" autofocus>

                                    @if ($errors->has('end_date'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('end_date') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group mb-2">
                                <label for="payment_type" class="col-md-4 control-label">Payment Type</label>
                                <div class="col-md-11">
                                    <select name="payment_type" id="payment_type" class="form-control">
                                        <option value="1">Cash</option>
                                        <option value="2">Online Transfer</option>
                                    </select>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary mt-2">Confirm booking</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h3 class="card-title">Car Information</h3>
                <img src="{{$car->image}}" class="rounded mb-2" height="100px" alt="Car Image">
                <table class="table table-striped table-responsive">
                    <tbody>
                        <tr>
                            <td class="w-25">Hourly Price</td>
                            <td>{{$car->hourly_price}} RM</td>
                        </tr>
                        <tr>
                            <td>M.G.F Year</td>
                            <td>{{$car->year}}</td>
                        </tr>
                        <tr>
                            <td>Model</td>
                            <td>{{$car->model}}</td>
                        </tr>
                        <tr>
                            <td>Color</td>
                            <td><div style="height: 20px; width: 30px; background-color: {{$car->color}}"></div></td>
                        </tr>
                    </tbody>
                </table>

                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Automatic Calculation</p>
                        <p>Estimated Hours : <span id="hours">0</span> hours</p>
                        <p>Estimated Price : <span id="priceCal">0</span> RM</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        const startDateForm = document.getElementById('start_date');
        const endDateForm = document.getElementById('end_date');
        let startDate = new Date(startDateForm.value);
        let endDate = new Date(endDateForm.value);

        endDateForm.addEventListener('change', function() {
            startDate = new Date(startDateForm.value);
            endDate = new Date(endDateForm.value);
            if(startDate && endDate) {
                const diff = endDate.getTime() - startDate.getTime();
                const hours = Math.floor(diff / (1000 * 60 * 60));
                const price = hours * {{$car->hourly_price}};
                document.getElementById('hours').innerHTML = hours.toString();
                document.getElementById('priceCal').innerHTML = price.toString();
            }
        });

    </script>
@endsection