@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-sm-12 col-lg-12 offset-lg-12">
            <div class="card mb-4">
                <div class="card-header"><strong>{{ $pageName ?? '' }}</strong></div>
                <div class="card-body">
                    <div class="tab-content rounded-bottom">

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show"role="alert">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button class="btn-close" type="button" data-coreui-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-12">
                                <span class="fw-bold">Event Name: </span> {{ $data->name??'' }} <br>
                                <span class="fw-bold">Date: </span> {{ $data->date??'' }} <br>
                                <span class="fw-bold">Duration: </span> {{ $data->duration??'' }} <br>
                                <span class="fw-bold">Address: </span> {{ $data->address??'' }}, {{ $data->city_table->name??'' }}, {{ $data->country_table->address??'' }} <br>
                            </div>
                        </div>

                        <form method="POST" action="{{ url('event-booking-save') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="event_id" value="{{ $data->id }}">
                            <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-719">
                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="date">Date <span
                                                    class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="date" type="date" value="{{ date('m-d-Y') }}" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="customer_phone">Customer Phone <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="customer_phone" id="customer_phone" value="{{ old('customer_phone') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="customer_name">Customer Name <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="customer_name" id="customer_name" value="{{ old('customer_name') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="customer_address">Customer Address <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="customer_address" id="customer_address" value="{{ old('customer_address') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="package">Package <span class="text-danger">*</span></label>
                                              <select name="package" id="package" class="form-control form-control-sm chosen-select" data-placeholder="Package">
                                                    <option value="">Select</option>
                                                    @if (count($packages) > 0)
                                                        @foreach ($packages as $package)
                                                            <option value="{{ $package->id ?? '' }}" price="{{ $package->price ?? 0 }}">
                                                                {{ $package->name ?? '' }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                        </div>
                                    </div>
                                      <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="no_of_person">No of Person <span
                                                    class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="no_of_person" id="no_of_person" value="{{ old('no_of_person') }}" type="number" placeholder="Required">
                                            <input class="form-control form-control-sm" id="adult_price" type="hidden">
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-4 offset-8">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="sub_total">Sub Total <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="sub_total" id="sub_total" value="{{ old('sub_total') }}" value="0" type="number" step="any" placeholder="Required" readonly>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="discount">Discount <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="discount" id="discount" value="{{ old('discount') }}" value="0" type="number" step="any" placeholder="Required">
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="extra_charge">Extra Charge <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="extra_charge" id="extra_charge" value="{{ old('extra_charge') }}" value="0" step="any" type="number" placeholder="Required">
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="total">Total <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="total" id="total" value="{{ old('total') }}" type="number" value="0" step="any" readonly placeholder="Required">
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="paid">Paid <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="paid" id="paid" value="{{ old('paid') }}" type="number" value="0" step="any" placeholder="Required">
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="form-label" for="due">Due <span class="text-danger">*</span></label>
                                                <input class="form-control form-control-sm" name="due" id="due" value="{{ old('due') }}" type="number" value="0" step="any" readonly placeholder="Required">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <button type="submit" class="btn btn-info text-light btn-sm m-1"
                                        style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-task') }}">
                                            </use>
                                        </svg>
                                        Save
                                    </button>

                                    <a href="{{ route('category.index') }}" class="btn btn-warning text-light btn-sm m-1"
                                        style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-x') }}">
                                            </use>
                                        </svg>
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('#customer_phone').on('keyup', function() {
            let phone = $(this).val();

           $.ajax({
                url: "{{ url('/') }}"+'/get-customer',
                type: 'GET',
                dataType: 'json',
                data: {phone: phone},
                success: function(res) {
                    if(res){
                        $('#customer_name').val(res.name)
                        $('#customer_address').val(res.address)
                    }
                }
            });
        });

        $('#package, #no_of_person, #discount, #extra_charge, #paid').on('change keyup', function() {
            let price = $('#package').find("option:selected").attr('price');

            let no_of_person = $('#no_of_person').val();

            let subTotal = no_of_person * price;

            $('#sub_total').val(subTotal);

            let discount = $('#discount').val();
            let extra_charge = $('#extra_charge').val();
            let paid = $('#paid').val();

            let total = ((subTotal - (subTotal / 100) * discount) + (extra_charge * 1))
            $('#total').val(total);

            let due = total - paid;
            $('#due').val(due);


        });
    </script>
@endsection