@extends("layouts.default")

@section("title", trans("lang.booking_",['name'=>__('lang.detail')]))

@section("block-header")
    @lang('lang.booking_',['name'=>trans('lang.detail')])
    <small>
        <a class="btn btn-primary" href="{{ route('rent.list') }}">@lang('lang.back')</a>
    </small>
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item">
        <a href="{{ route('rent.list') }}">@lang('lang.booking_',['name'=>trans('lang.list')])</a>
    </li>
    <li class="breadcrumb-item active">
        @lang('lang.booking_',['name'=>trans('lang.detail')])
    </li>
@stop

@section("content")
<!-- Basic Table -->
@includeWhen(Session::has("success"),"inc.alert")

@if ($errors->any())
    <div class="alert alert">
        @foreach ($errors->all() as $error)
            {{ $error }}
        @endforeach
    </div>
@endif

<div class="row clearfix">
    <div class="col-md-12">
        <div class="card">
            <div class="body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a 
                            class="nav-link active"
                            data-toggle="tab"
                            href="#order-info">
                            @lang('lang.booking_',['name'=>trans('lang.information')])
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel"
                         class="tab-pane active in"
                         id="order-info">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="body">
                                    @include('rent.inc.booking')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .badge-purple {
        border-color: #800080;
        color: #800080;
    }
</style>

@section('modal')
    <!-- todo -->
    <form id="form-update-booking" action="{{ route('booking.update_item') }}" method="post">
        @csrf
        @method("PUT")

        <input type="hidden" name="rent_id" id="rent_id">

        <div id="modal-update-booking"
             class="modal fade in"
             tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content text-capitalize">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Booking</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto" for="amount">@lang('lang.amount')</label>
                                    <div class="col-md-8">
                                        <input type="number" value="" class="form-control"
                                               id="amount"
                                               name="amount"
                                               placeholder="@lang('lang.amount')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="unit_price">@lang('lang.unit_price') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value=""
                                               type="text" name="unit_price"
                                               id="unit_price"
                                               placeholder="@lang('lang.unit_price')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="text-capitalize btn btn-secondary"
                                data-dismiss="modal">@lang('lang.close')</button>
                        <button type="submit" class="text-capitalize btn-save btn btn-success">@lang('lang.save')</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@stop
@section('script')
<script>
$(function(){

    // update purchase qty & price
    $('.btn-transfer').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-transfer-purchase');
        $("#modal-transfer-purchase").modal("show");
    });

    // update purchase qty & price
    $('.btn-edit-booking').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-update-booking'),
            rent_id = me.attr('data-booking-id'),
            amount = me.attr('data-amount'),
            unit_price = me.attr('data-unit-price');
        form.find('#rent_id').val(rent_id);
        form.find('#amount').val(amount);
        form.find('#unit_price').val(unit_price);
        $("#modal-update-booking").modal("show");
    });

    // update status
    $(".update-status").on('click', function () {
        const data = $(this).attr('data-value');
        const url = $(this).attr('data-url');
        const sms = $(this).attr('data-sms');
        const propose_amount = $(this).attr('data-propose-amount');
        const delivery_date = $(this).attr('data-delivery-date');
        const propose_date = $(this).attr('data-propose-date');
        const offer_key = $(this).attr('data-offer-id');
        let temp = `<input type="hidden" value="${data}" name="status">`;
        $("#modal-form-update-status").attr('action', url);
        $("#modal-form-update-status .form-content").append(temp);
        $("p.sms").text(sms);
        $("#modal-update-status").modal('show');
    });
    const latitude = "{{$latitude}}";
    const longitude = "{{$longitude}}";
    var myLatLng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: myLatLng
    });
    marker = new google.maps.Marker({
        map: map,
        position: myLatLng,
        title: ''
    });

});

</script>
@stop