@extends('mainlayout.layout')


@section('title')

@endsection

@push('css')
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"
    integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg=="
    crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<style type="text/css">
    .bootstrap-tagsinput {
        width: 100%;
    }

    .label-info {
        background-color: #17a2b8;

    }

    .label {
        display: inline-block;
        padding: .25em .4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out,
            border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
</style>
@endpush


@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">


            <h4 class="mb-0 font-size-18">Booking Visit Time For <a href="/property/show/@encrypt($property->id)">
                    {{$property->name}} </a></h4>


        </div>
    </div>
</div>
<!-- end page title -->


@if(!empty($visits))
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <div class="table-responsive">

                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">

                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Location</th>

                                <th>Day</th>

                                <th>Time</th>

                                <th>Phone Number</th>
                                <th>Charge</th>
                                <th>Amount</th>




                            </tr>
                        </thead>
                        <tbody>
                            @foreach($visits as $index => $p)
                            <tr>
                                <th scope="row">{{++$index}}</th>
                                <td>{{$p->location}}</td>

                                <td>{{$p->bookingday}}</td>
                                <td>{{$p->visit_times}}</td>
                                <td>{{$p->phone_number}}</td>
                                <td>{{$p->charge}}</td>
                                <td>TZS {{number_format($p->amount, 0,'.',',')}}</td>

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>



            </div>
        </div>
    </div>
</div>

@endif


<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <form action="/property/addbookvisit/@encrypt($property->id)" enctype="multipart/form-data"
                    method="POST">

                    @csrf




                    <div class="row">

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="formrow-inputState">Day</label>
                                <select class="form-control" name="bookday" required="">


                                    <option></option>
                                    <option value="saturday">Saturday</option>
                                    <option value="sunday">Sunday</option>
                                    <option value="monday">Monday</option>
                                    <option value="tuesday">Tuesday</option>
                                    <option value="wenesday">Wenesday</option>
                                    <option value="thursday">Thursday</option>
                                    <option value="friday">Friday</option>



                                </select>

                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="formrow-inputState">Time</label>
                                <input data-role="tagsinput" class="form-control" name="time" required="">

                            </div>
                        </div>


                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="formrow-inputState">Location</label>
                                <input data-role="tagsinput" class="form-control" name="location" required="">



                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="formrow-inputState">Phone Number</label>
                                <input class="form-control" name="phonenumber" required="">



                            </div>
                        </div>




                    </div>

                    <div class="row">

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="formrow-inputState">Charge</label>
                                <select name="charge" class="form-control" required="" id="charge">
                                    <option></option>

                                    <option value="Free">Free</option>
                                    <option value="Paid">Paid</option>

                                </select>


                            </div>
                        </div>

                        <div class="col-lg-3" id="amount">
                            <div class="form-group">
                                <label for="formrow-inputState">Amount</label>
                                <input class="form-control" name="amount" type="number" min="0">



                            </div>
                        </div>

                    </div>




                    <div class="appendlanduse">


                    </div>










                    <div class="row">
                        <div class="col-lg-3">

                            <button class="mt-4 btn btn_blck w-md" style="width:100%;">Submit Visit Time
                            </button>

                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>





@endsection

@push('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>
    //     $("#addlanduse").click(function(){

//         console.log("You clicked me");
// });
$("#amount").hide();

$("#charge").change(function(){
    if($(this).val()=="Paid")
        $("#amount").show();
       else
        $("#amount").hide();
    
});

</script>

@endpush