@extends('layouts.main-layout')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.css">
@endsection

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Row-->

            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mb-5">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#" style="font-size:24px; opacity:0.5; color:black;">Property</a></li>
                  <li class="breadcrumb-item active" aria-current="page" style="color:black; font-size:18px;">Tax</li>
                </ol>
              </nav>

              <a href="#" class="btn btn-sm btn-primary er fs-6 px-8 py-4 mb-4" data-bs-toggle="modal" data-bs-target="#addNewTax">Add New</a>

            <div class="row g-5 g-xl-8">
                <div class="col-xl-12">
                    <div class="card bg-body-white hoverable card-xl-stretch mb-xl-8">
                        <!--begin::Body-->
                        <div class="card-body">
                            <!--begin::Modal - New Card-->
								<div class="modal fade" id="addNewTax" tabindex="-1" aria-hidden="true">
									<!--begin::Modal dialog-->
									<div class="modal-dialog modal-dialog-centered mw-650px">
										<!--begin::Modal content-->
										<div class="modal-content">
											<!--begin::Modal header-->
											<div class="modal-header">
												<!--begin::Modal title-->
												<h2>Add New Tax</h2>
												<!--end::Modal title-->
												<!--begin::Close-->
												<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
													<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
													<span class="svg-icon svg-icon-1">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
															<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
															<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
														</svg>
													</span>
													<!--end::Svg Icon-->
												</div>
												<!--end::Close-->
											</div>
											<!--end::Modal header-->
											<!--begin::Modal body-->
											<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
												<!--begin::Form-->
												<form method="POST" action="{{ route('admin.tax.store') }}" id="kt_modal_new_card_form" class="form" action="#">
                                                    @csrf
													<!--begin::Input group-->

                                                    <div class="d-flex flex-column mb-7 fv-row">
														<!--begin::Label-->
														<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
															<span class="required">Name</span>
														</label>
														<!--end::Label-->
													    <input type="text" name="tax_name" class="form-control">
													</div>


													<div class="d-flex flex-column mb-7 fv-row">
														<!--begin::Label-->
														<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
															<span class="required">Charge</span>
														</label>
														<!--end::Label-->
														<select name="chargeType" id="chargeType" class="form-control">
                                                            <option disabled selected>Choose Charge Type</option>
                                                            <option value="inclusive">Inclusive</option>
                                                            <option value="exclusive">Exclusive</option>
                                                        </select>
													</div>
													<!--end::Input group-->
													<!--begin::Input group-->
													<div class="d-flex flex-column mb-7 fv-row">
														<!--begin::Label-->
														<label class="required fs-6 fw-bold form-label mb-2">Charge Mode</label>
														<!--end::Label-->
														<!--begin::Input wrapper-->
														<div class="position-relative">
															<!--begin::Input-->
															<select name="chargeMode" id="chargeMode" class="form-control">
                                                                <option disabled selected>Choose Charge Mode</option>
                                                                <option value="percent">Percent</option>
                                                                <!--<option value="fixed">Fixed</option>-->
                                                            </select>
															<!--end::Input-->
															<!--begin::Card logos-->
															<div class="position-absolute translate-middle-y top-50 end-0 me-5">
																<img src="assets/media/svg/card-logos/visa.svg" alt="" class="h-25px" />
																<img src="assets/media/svg/card-logos/mastercard.svg" alt="" class="h-25px" />
																<img src="assets/media/svg/card-logos/american-express.svg" alt="" class="h-25px" />
															</div>
															<!--end::Card logos-->
														</div>
													</div>



                                            <div class="d-flex flex-column mb-7 fv-row">
														<!--begin::Label-->
												<label class="required fs-6 fw-bold form-label mb-2">Precedence</label>
                                                    <div class="position-relative">
                                                        <!--begin::Input-->
                                                        <select name="precedence" id="precedence" class="form-control">
                                                            <option disabled selected>Choose Precedence</option>
                                                            <!--<option value="0">0</option>-->
                                                            <option value="1">1</option>
                                                            <option value="2">2</option>
                                                            <option value="3">3</option>
                                                            <option value="4">4</option>
                                                            <option value="5">5</option>
                                                            <!--<option value="6">6</option>-->
                                                            <!--<option value="7">7</option>-->
                                                            <!--<option value="8">8</option>-->
                                                            <!--<option value="9">9</option>-->
                                                            <!--<option value="10">10</option>-->
                                                        </select>
                                                        <!--end::Input-->
                                                        <!--begin::Card logos-->

                                                        <!--end::Card logos-->
                                                    </div>
                                            </div>
													<!--end::Input group-->
													<!--begin::Input group-->

                                                    <div class="d-flex flex-column mb-7 fv-row">
														<label class="required fs-6 fw-bold form-label mb-2">Amount
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Float should be two decimal"></i>
                                                        </label>
														<div class="position-relative">
															<input type="number" name="amount" id="amount" class="form-control">
														</div>
													</div>

                                                    <div class="d-flex flex-column mb-7 fv-row">
                                                        <label for="">Applicable On Reservation</label>
                                                        <input type="checkbox" name="applicable_on_res"><br>

                                                        <label for="">Applicable On Extras</label>
                                                        <input type="checkbox" name="applicable_on_extras">
													</div>

													<!--end::Input group-->
													<!--begin::Input group-->

													<!--end::Input group-->
													<!--begin::Actions-->
													<div class="text-center pt-15">
														{{-- <button type="reset" id="kt_modal_new_card_cancel" class="btn btn-light me-3">Discard</button> --}}
														<button type="submit" id="kt_modal_new_card_submit" class="btn btn-primary">
															<span class="indicator-label">Submit</span>
															<span class="indicator-progress">Please wait...
															<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
														</button>
													</div>
													<!--end::Actions-->
												</form>
												<!--end::Form-->
											</div>
											<!--end::Modal body-->
										</div>
										<!--end::Modal content-->
									</div>
									<!--end::Modal dialog-->
								</div>
								<!--end::Modal - New Card-->
                                <div class="row">
                                    @if($taxes->count() > 0)
                                    <table class="table table-dark">
                                        <thead class="text-center">
                                            <th>Tax Name</th>
                                            <th>Tax Amount</th>
                                            <th>Applicable On Reservations</th>
                                            <th>Applicable On Extras</th>
                                        </thead>
                                        <tbody>
                                            @foreach ($taxes as $tax)
                                                <tr class="text-center">
                                                    <td>{{ $tax->Name }}</td>
                                                    <td>{{ $tax->Amount }}</td>
                                                    <td>{{ $tax->ApplicableOnReservation == 1 ? 'Yes': 'No' }}</td>
                                                    <td>{{ $tax->ApplicableOnExtra == 1 ? 'Yes': 'No' }}</td>
                                                </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                    @else
                                        <h4 class="text-center">No Tax found.</h4>
                                    @endif
                                </div>
                        </div>
                        <!--end::Body-->
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
<script>
    var tax_status = {{ Session::get('alert-success') }}

    if(tax_status) {
        $.toast({
            heading: 'Success',
            text: 'Tax Created Successfully!',
            position: 'top-right',
            icon: 'success',
            stack: false
    })
    }
</script>
@endsection