@extends('layouts.dashboard')
@section('content')
<style>
    .table_col td{
        text-align: right;
        padding: 22px 20px 0;
    }
    .tab-pane button.btn.btn-primary {
        margin: 0 0 15px auto;
        display: table;
    }
    .contractors_table
    {
        height: 750px;
    }
    .text-right{
        text-align:right;
    }
    .selected_contractor{
        background: #0d6efd;
        color: #fff;
        font-weight: 800;
    }
    .table_col td.text-right
    {
        padding: 30px 0 0 0;
    }
    .nav .nav-link{
        background: #f6f9ff;
        border: 1px solid #d9d9d9;
        border-radius: 0;
        border-bottom: none;
        color: #393939;
        font-weight: 600;
        font-size: 15px;
        min-height: 70px;
    }
    .nav .nav-link:last-child{
        border-bottom: 1px solid #d9d9d9;
    }
    .tabs_wrapper_exhibitor .tab-content{
        background: #fff;
        border: 1px solid #d9d9d9;
        border-left: none;
        height:100vh;
        width: 100%;
    }
    .exhibitor_form label{
        font-weight: 700;
        font-size: 14px;
        margin: 0 0 7px 0;
        color: #5a5a5a;
    }
    .exhibitor_form span {
        color:red
    }
    .exhibitor_form .form-control{
        margin: 0 0 20px 0;
    }
    .exhibitor_form .tab-pane{
        position: absolute;
        width: 83%;
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <form class="exhibitor_form" action="{{ url('/admin/home/exhibitors/new')}}" method="POST">
                @csrf
                @method('POST')
            <div class="card">
                @include('notification')
                <div class="card-header">
                    <div style="text-transform:capitalize;display: inline-block;margin: 10px 0 0 0;" class="card-title">Exhibitor</div>
                    <a style="float: right;margin: 10px 0 20px 0;" href="{{ url('/admin/home/exhibitors/list') }}" class="btn btn-primary">Go Back</a>
                </div>
                <div class="card-body p-2">
                    <div class="d-flex align-items-start tabs_wrapper_exhibitor">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <button class="nav-link active" id="v-pills-details-tab" data-bs-toggle="pill" data-bs-target="#v-pills-details" type="button" role="tab" aria-controls="v-pills-details" aria-selected="false" tabindex="-1">Basic Details</button>
                            <button class="nav-link" id="v-pills-stalls-tab" data-bs-toggle="pill" data-bs-target="#v-pills-stalls" type="button" role="tab" aria-controls="v-pills-stalls" aria-selected="false" tabindex="-1">Stalls</button>
                            <button class="nav-link" id="v-pills-requirement-tab" data-bs-toggle="pill" data-bs-target="#v-pills-requirement" type="button" role="tab" aria-controls="v-pills-requirement" aria-selected="true">Branding Requirement</button>
                            <button class="nav-link" id="v-pills-power-tab" data-bs-toggle="pill" data-bs-target="#v-pills-power" type="button" role="tab" aria-controls="v-pills-power" aria-selected="true">Power Requirement</button>
                            <button class="nav-link" id="v-pills-furniture-tab" data-bs-toggle="pill" data-bs-target="#v-pills-furniture" type="button" role="tab" aria-controls="v-pills-furniture" aria-selected="true">Furniture Requirement</button>
                            <button class="nav-link" id="v-pills-catalogue-tab" data-bs-toggle="pill" data-bs-target="#v-pills-catalogue" type="button" role="tab" aria-controls="v-pills-catalogue" aria-selected="true">Catalogue Requirement</button>
                            <button class="nav-link" id="v-pills-appointed-tab" data-bs-toggle="pill" data-bs-target="#v-pills-appointed" type="button" role="tab" aria-controls="v-pills-appointed" aria-selected="true">Appointed Contractor</button>
                            <button class="nav-link" id="v-pills-contractorBadge-tab" data-bs-toggle="pill" data-bs-target="#v-pills-contractorBadge" type="button" role="tab" aria-controls="v-pills-contractorBadge" aria-selected="true">Contractor Badges</button>
                            <button class="nav-link" id="v-pills-facia-tab" data-bs-toggle="pill" data-bs-target="#v-pills-facia" type="button" role="tab" aria-controls="v-pills-facia" aria-selected="true">Facia Board</button>
                            <button class="nav-link" id="v-pills-brands-tab" data-bs-toggle="pill" data-bs-target="#v-pills-brands" type="button" role="tab" aria-controls="v-pills-facia" aria-selected="true">Brands</button>
                            <button class="nav-link" id="v-pills-payment-tab" data-bs-toggle="pill" data-bs-target="#v-pills-payment" type="button" role="tab" aria-controls="v-pills-facia" aria-selected="true">Payment Details</button>
                        </div>
                        <div class="tab-content p-3" id="v-pills-tabContent">
                            <div class="tab-pane fade active show" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Company Name <span>*</span></label>
                                            <input type="text" required name="company_name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Name <span>*</span></label>
                                            <input type="text" required name="name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Email <span>*</span></label>
                                            <input type="email" required name="email" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Address <span>*</span></label>
                                            <input type="text" required name="address" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>City <span>*</span></label>
                                            <input type="text" required name="city" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>State <span>*</span></label>
                                            <input type="text" required name="state" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Pin <span>*</span></label>
                                            <input type="text" maxlength="5" required name="pin" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Mobile <span>*</span></label>
                                            <input type="text" required name="mobile" maxlength="10" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Telephone </label>
                                            <input type="text" name="telephone" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Fax</label>
                                            <input type="text" name="fax" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>GST</label>
                                            <input type="text" name="gst_number" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label> Secondary Emails </label>
                                            <input type="text" placeholder="(You can add multiple use comma seperation)" name="seconday_emails" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-stalls" role="tabpanel" aria-labelledby="v-pills-stalls-tab">
                                <!-- Stalls -->
                                <div class="row">
                                    <div class="col-md-2" style="margin-bottom:10px">
                                        <label>Find Stall</label>
                                        <input type="text" id="searchInput" placeholder="Search Stall Number.." class="form-control">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Stall Number</label>
                                            <!-- <input type="text" class="form-control" v-model="stall_name" placeholder="Stall Number"> -->
                                            <select name="" id="stall_search" class="form-control" v-model="stall_name" @change="addHallNo()">
                                                <option v-for="stall in allStalls" v-bind:value="stall">
                                                    @{{ stall.stall_no }} (@{{ stall.hall_no }})
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 hall_number_div">
                                        <div class="form-group">
                                            <label>Hall Number</label>
                                            <input type="text" class="form-control" readonly v-model="hall_no" placeholder="Hall Number">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                        <label>Stall Category</label>
                                            <select name="" id="" class="form-control" v-model="stall_category" @change="calculateTotal()">
                                                <option v-for="category in categories" v-bind:value="category">
                                                    @{{ category.name }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 currency_div">
                                        <div class="form-group">
                                            <label>Stall Price</label>
                                            <!-- <input type="text" class="form-control" readonly v-model="stall_price" placeholder="Stall Price"> -->
                                            <select name="" id="" class="form-control" v-model="stall_price" @change="calculateTotal()">
                                                <option v-for="category in categories" v-bind:value="category.value">
                                                    @{{ category.value }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 currency_div">
                                        <div class="form-group">
                                            <label>Currency</label>
                                            <!-- <input type="text" class="form-control" readonly v-model="currency" placeholder="Currency"> -->
                                            <select name="" id="" class="form-control" v-model="currency">
                                                <option v-for="category in categories" v-bind:value="category.currency">
                                                    @{{ category.currency }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Stall Area</label>
                                            <select name="" id="" class="form-control" v-model="stall_area" @change="calculateTotal()">
                                                <option v-for="stallArea in stallsArea" v-bind:value="stallArea">
                                                    @{{ stallArea.area }}
                                                </option>
                                            </select>
                                            <!-- <input type="number" v-model="stall_area" class="form-control" placeholder="Area" @change="calculateTotal()"> -->
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Total</label>
                                            <input type="text" v-model="stall_total" class="form-control" placeholder="Total" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Discount(%)</label>
                                            <input type="number" v-model="discount" class="form-control" placeholder="Discount" @change="addDiscount()">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Discounted Amount</label>
                                            <input type="number" v-model="discounted_amount" readonly class="form-control" placeholder="Discount Amount">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Total After Discount</label>
                                            <input type="text" v-model="discounted_value" class="form-control" readonly placeholder="Discounted Value">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>SGST(9%)</label>
                                            <input type="text" v-model="stall_sgst" class="form-control" placeholder="SGST(9%)" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>CGST(9%)</label>
                                            <input type="text" v-model="stall_cgst" class="form-control" placeholder="CGST(9%)" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label>Grand Total</label>
                                            <input type="text" v-model="stall_grand_total" class="form-control" placeholder="Total" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn btn-primary pull-right" @click="addStall()">Add Stall</button>
                                    </div>
                                </div>

                                <hr>

                                <table class="table table-striped table-bordered">
                                    <tr>
                                        <th>Stall Number (Hall No.)</th>
                                        <th>Category</th>
                                        <th>Price (Currency)</th>
                                        <th>Area</th>
                                        <th>Total</th>
                                        <th>Discount(%)</th>
                                        <th>Discounted Amount</th>
                                        <th>Total After Discount</th>
                                        <th>CGST(9%)</th>
                                        <th>SGST(9%)</th>
                                        <th>Grand Total</th>
                                        <th>Actions</th>
                                    </tr>
                                    <tr v-if="stalls.length == 0">
                                        <td colspan="8" class="text-center">
                                            <strong>No Stalls</strong>
                                        </td>
                                    </tr>
                                    <tr v-for="(stall, index) in stalls">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][stallno]'" v-bind:value="stall.name">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][hallno]'" v-bind:value="stall.hallno">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][area]'" v-bind:value="stall.area">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][category]'" v-bind:value="stall.category">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][currency]'" v-bind:value="stall.currency">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][total]'" v-bind:value="stall.total">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][discount]'" v-bind:value="stall.discount">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][discounted_amount]'" v-bind:value="stall.discounted_amount">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][price_after_discount]'" v-bind:value="stall.price_after_discount">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][cgst]'" v-bind:value="stall.cgst">
                                        <input type="hidden" v-bind:name="'stalls[' + index + '][sgst]'" v-bind:value="stall.sgst">
                                        <input type="hidden" v-bind:name="'stalls['+ index + '][grandtotal]'" v-bind:value="stall.grand_total">
                                        <td>@{{ stall.name }} (@{{ stall.hallno }})</td>
                                        <td>@{{ stall.category }}</td>
                                        <td>@{{ stall.price }} (@{{ stall.currency }})</td>
                                        <td>@{{ stall.area }}</td>
                                        <td>@{{ stall.total }}</td>
                                        <td>@{{ stall.discount }}</td>
                                        <td>@{{ stall.discounted_amount }}</td>
                                        <td>@{{ stall.price_after_discount }}</td>
                                        <td>@{{ stall.cgst }}</td>
                                        <td>@{{ stall.sgst }}</td>
                                        <td>@{{ stall.grand_total }}</td>
                                        <td>
                                            <button class="btn btn-danger" @click="removeStall(index)">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!-- Branding -->
                            <div class="tab-pane fade" id="v-pills-requirement" role="tabpanel" aria-labelledby="v-pills-requirement-tab">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBranding">
                                    Add Branding
                                </button>
                                <table class="table">
                                    <thead>
                                        <th scope="col">Image</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Dimensions</th>
                                        <th scope="col">Area</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Action</th>
                                    </thead>
                                    <tbody>
                                    <tr class="table-success">
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                    </tr>
                                    <tr class="table_col">
                                        <td colspan="5" class="text-right">
                                            Sub Total
                                        </td> 
                                        <td>
                                            <input readonly="readonly" type="text" name="branding_requirement[sub_total]" class="form-control">
                                        </td>
                                    </tr>
                                    <tr class="table_col">
                                        <td colspan="5" class="text-right">
                                            Amount
                                        </td> 
                                        <td>
                                            <input type="number" readonly="readonly" name="branding_requirement[discounted_amount]" class="form-control">
                                        </td>
                                    </tr>
                                    <tr class="table_col">
                                        <td colspan="5" class="text-right">
                                            CGST 9%
                                        </td> 
                                        <td>
                                            <input readonly="readonly" type="text" name="branding_requirement[cgst]" class="form-control">
                                        </td>
                                    </tr>
                                    <tr class="table_col">
                                        <td colspan="5" class="text-right">
                                            SGST 9%
                                        </td> 
                                        <td>
                                            <input readonly="readonly" type="text" name="branding_requirement[sgst]" class="form-control">
                                        </td>
                                    </tr>
                                    <tr class="table_col">
                                        <td colspan="5" class="text-right">
                                            Grand Total
                                        </td> 
                                        <td>
                                            <input readonly="readonly" type="text" name="branding_requirement[grand_total]" class="form-control">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!-- Modal -->
                                    <div class="modal fade" id="addBranding" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                <h5 class="modal-title">Brandings</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th scope="col">Image</th>
                                                            <th scope="col">Name</th>
                                                            <th scope="col">Dimensions</th>
                                                            <th scope="col">Area</th>
                                                            <th scope="col">Price</th>
                                                            <th scope="col">Action</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($masters['brandings'] as $branding)
                                                            <tr class="table-warning">
                                                                <td>
                                                                    @if(!isset($branding['status']))
                                                                        <img class="img-fluid" src="{{ asset('storage/' . $branding['image']) }}" alt="">
                                                                    @else
                                                                        <img class="img-fluid" src="{{ $branding['image'] }}" alt="">
                                                                    @endif
                                                                </td>
                                                                <td>{{ $branding['name'] }}</td>
                                                                <td>{{ $branding['width'] }} * {{ $branding['height'] }}</td>
                                                                <td>{{ number_format($branding['width'] * $branding['height'])}}</td>
                                                                <td>{{ $currencySymbol . $branding['price'] }}</td>
                                                                <td>
                                                                    <button type="button" class="btn btn-outline-secondary">Select</button>
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary">Save changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <!-- Modal Ends -->
                            </div>
                            <!-- Power -->
                            <div class="tab-pane fade" id="v-pills-power" role="tabpanel" aria-labelledby="v-pills-power-tab">
                            <div class="row">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn btn-primary pull-right" data-bs-toggle="modal" data-bs-target="#power-requirements-modal">Add Power Requirement</button>
                                        <div id="power-requirements-modal" class="modal fade" role="dialog">
                                            <div class="modal-dialog modal-lg">
                                                <!-- Modal content-->
                                                <div class="modal-content">
                                                    <div class="modal-header bg-primary text-white">
                                                        <h4 class="modal-title">Select Power Requirement</h4>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <table class="table table-striped table-bordered">
                                                            <tr>
                                                                <th>Type</th>
                                                                <th>Price</th>
                                                                <th>Action</th>
                                                            </tr>
                                                            <tr v-for="(supply, index) in powerSupplies">
                                                                <td>@{{ supply.type }}</td>
                                                                <td>Rs @{{ supply.price }}</td>
                                                                <td><button style="display:inherit" type="button" class="btn btn-primary" v-on:click="selectPowerSupply(index)">Select</button></td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <table class="table table-striped table-bordered table-responsive">
                                            <tr>
                                                <th>Type</th>
                                                <th>Rate Per KW Rupee</th>
                                                <th>Power Required</th>
                                                <th>Single Phase</th>
                                                <th>Three Phase</th>
                                                <th>Total Amount</th>
                                                <th>Action</th>
                                            </tr>
                                            <tr v-for="(powerSupply, index) in selectedPowerRequirements">
                                                <td><input class="form-control" type="text" readonly v-bind:value="powerSupply.type" v-bind:name="'power_requirement_details[' + index + '][type]'"/></td>
                                                <td><input class="form-control" type="number" readonly v-bind:value="powerSupply.rate_per_kw" v-bind:name="'power_requirement_details[' + index + '][rate_per_kw]'"/></td>
                                                <td><input required class="form-control" type="number" v-model="powerSupply.power_required" @change="updateTotal(index)" v-bind:name="'power_requirement_details[' + index + '][power_required]'" /></td>
                                                <td><input type="radio" checked v-bind:name="'power_requirement_details[' + index + '][phase]'" class="text-center" v-bind:value="'single'" /></td>
                                                <td><input type="radio" v-bind:name="'power_requirement_details[' + index + '][phase]'" class="text-center" v-bind:value="'three'" /></td>
                                                <td><input type="text" v-bind:name="'power_requirement_details[' + index + '][total]'" readonly class="form-control" v-model="powerSupply.total" /></td>
                                                <td><button class="btn btn-danger" type="button" @click="removePowerSupply(index)"><i class="bi bi-trash"></i></button></td>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>Total Rs: </th>
                                                <th><input type="text" readonly v-model="power_requirement.sub_total" name="power_requirement[sub_total]" class="result form-control text-right" value="" /></th>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>PLUS @SGST: (9%) </th>
                                                <th><input type="text" v-model="power_requirement.sgst" readonly name="power_requirement[sgst]" class="sgstresult form-control text-right" value="" /></th>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>PLUS @CGST: (9%) </th>
                                                <th value="0"><input type="text" v-model="power_requirement.cgst" readonly name="power_requirement[cgst]" class="form-control text-right" value="" /></th>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>Grand Total: </th>
                                                <th><input type="text" v-model="power_requirement.grand_total" readonly name="power_requirement[grand_total]" class="form-control text-right" value="" /></th>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- Furniture -->
                            <div class="tab-pane fade" id="v-pills-furniture" role="tabpanel" aria-labelledby="v-pills-furniture-tab">
                            <div class="row">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn btn-primary pull-right" data-bs-toggle="modal" data-bs-target="#furnitures-modal">Add Furniture</button>
                                        <div id="furnitures-modal" class="modal fade" role="dialog">
                                            <div class="modal-dialog modal-lg">
                                                <!-- Modal content-->
                                                <div class="modal-content">
                                                    <div class="modal-header bg-primary text-white">
                                                        <h4 class="modal-title">Select Furniture</h4>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <table class="table table-striped table-bordered">
                                                            <tr>
                                                                <th>Image</th>
                                                                <th>Name</th>
                                                                <th>Price</th>
                                                                <th>Action</th>
                                                            </tr>
                                                            <tr v-for="(furniture, index) in furnitures">
                                                                <td><img v-bind:src="'/uploads/furnitures/' + furniture.image" width="80px" height="80px"></td>
                                                                <td>@{{ furniture.name }}</td>
                                                                <td>Rs @{{ furniture.price }}</td>
                                                                <td><button type="button" class="btn btn-primary" v-on:click="selectFurniture(index)">Select</button></td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <table class="table table-striped table-bordered">
                                            <tr>
                                                <th>Name</th>
                                                <th>Price</th>
                                                <th>Quantity</th>
                                                <th>Total</th>
                                                <th>Actions</th>
                                            </tr>
                                            <tr v-for="(selectedFurniture, index) in selectedFurnitures">
                                                <input type="hidden" v-bind:value="selectedFurniture.name" v-bind:name="'furniture_requirement_details['+index+'][name]'">
                                                <input type="hidden" v-bind:value="selectedFurniture.price" v-bind:name="'furniture_requirement_details['+index+'][price]'">
                                                <input type="hidden" v-bind:value="selectedFurniture.total" v-bind:name="'furniture_requirement_details['+index+'][total]'">
                                                <td>@{{ selectedFurniture.name }}</td>
                                                <td>@{{ selectedFurniture.price }}</td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="selectedFurniture.furniture_required" @change="updateFurnitureTotal(index)" v-bind:name="'furniture_requirement_details['+index+'][furniture_required]'">
                                                </td>
                                                <td>@{{ selectedFurniture.total }}</td>
                                                <td>
                                                    <button class="btn btn-danger" type="button" @click="removeFurniture(index)">
                                                        <i class="bi bi-trash">
                                                        </i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    Sub Total
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="furniture_requirement[sub_total]" v-model="furniture_requirement.sub_total">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    SGST 9%
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="furniture_requirement[cgst]" v-model="furniture_requirement.cgst">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    CGST 9%
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="furniture_requirement[sgst]" v-model="furniture_requirement.sgst">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    Grand Total
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="furniture_requirement[grand_total]" v-model="furniture_requirement.grand_total">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- Catalogue -->
                            <div class="tab-pane fade" id="v-pills-catalogue" role="tabpanel" aria-labelledby="v-pills-catalogue-tab">
                            <div class="row">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#advertisements-modal">
                                            Add Advertisement
                                        </button>
                                        <div class="modal fade" id="advertisements-modal" tabindex="-1">
                                            <div class="modal-dialog modal-lg">
                                                <!-- Modal content-->
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h4 class="modal-title">Select Advertisement</h4>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <table class="table table-striped table-bordered">
                                                            <tr>
                                                                <th>Name</th>
                                                                <th>Price</th>
                                                                <th>Action</th>
                                                            </tr>
                                                            <tr v-for="(advertisement, index) in advertisements">
                                                                <td>@{{ advertisement.name }}</td>
                                                                <td>Rs @{{ advertisement.price }}</td>
                                                                <td>
                                                                    <button type="button" class="btn btn-outline-secondary" v-on:click="selectAdvertisement(index)">Select</button>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <table class="table table-striped table-bordered">
                                            <tr>
                                                <th>Name</th>
                                                <th>Price</th>
                                                <th>Quantity</th>
                                                <th>Total</th>
                                                <th>Actions</th>
                                            </tr>
                                            <tr v-for="(selectedAdvertisement, index) in selectedAdvertisements">
                                                <input type="hidden" v-bind:value="selectedAdvertisement.name" v-bind:name="'advertisement_requirement_details['+index+'][name]'">
                                                <input type="hidden" v-bind:value="selectedAdvertisement.price" v-bind:name="'advertisement_requirement_details['+index+'][price]'">
                                                <input type="hidden" v-bind:value="selectedAdvertisement.total" v-bind:name="'advertisement_requirement_details['+index+'][total]'">
                                                <td>@{{ selectedAdvertisement.name }}</td>
                                                <td>@{{ selectedAdvertisement.price }}</td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="selectedAdvertisement.advertisement_required" @change="updateAdvertisementTotal(index)" v-bind:name="'advertisement_requirement_details['+index+'][advertisement_required]'">
                                                </td>
                                                <td>@{{ selectedAdvertisement.total }}</td>
                                                <td>
                                                    <button class="btn btn-danger" type="button" @click="removeAdvertisement(index)">
                                                        <i class="bi bi-trash">
                                                        </i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    Sub Total
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="advertisement_requirement[sub_total]" v-model="advertisement_requirement.sub_total">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    SGST 9%
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="advertisement_requirement[cgst]" v-model="advertisement_requirement.cgst">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    CGST 9%
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="advertisement_requirement[sgst]" v-model="advertisement_requirement.sgst">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right">
                                                    Grand Total
                                                </td>
                                                <td>
                                                    <input readonly type="text" class="form-control" name="advertisement_requirement[grand_total]" v-model="advertisement_requirement.grand_total">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- Contractor -->
                            <div class="tab-pane fade" id="v-pills-appointed" role="tabpanel" aria-labelledby="v-pills-appointed-tab">
                                <div class="table-responsive contractors_table">
                                    <table class="table table-condensed">
                                        <thead>
                                            <th scope="col">Name</th>
                                            <th scope="col">Company Name</th>
                                            <th scope="col">Address</th>
                                            <th scope="col">City</th>
                                            <th scope="col">Zip</th>
                                            <th scope="col">Country</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col">Mobile</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">Action</th>
                                        </thead>
                                        <tbody>
                                        @foreach($masters['contractors'] as $key => $contractor)
                                        <tr class="{{ $key % 2 ? 'table-success' : 'table-warning'}}">
                                            <td>{{$contractor['name']}}</td>
                                            <td>{{$contractor['company_name']}}</td>
                                            <td>{{$contractor['address']}}</td>
                                            <td>{{$contractor['city']}}</td>
                                            <td>{{$contractor['zip']}}</td>
                                            <td>{{$contractor['country']}}</td>
                                            <td>{{$contractor['phone']}}</td>
                                            <td>{{$contractor['mobile']}}</td>
                                            <td>{{$contractor['email']}}</td>
                                            <td>
                                                <input data-id={{$contractor['id']}} onclick="return confirm('Are You Sure?')" class="btn btn-outline-secondary selectContractor" type="text" name="Select" value="Select">
                                            </td>
                                        </tr>
                                        @endforeach
                                        <input id="contractorId" readonly type="hidden" class="form-control" name="contractor_id" value="">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Contractor Badges -->
                            <div class="tab-pane fade" id="v-pills-contractorBadge" role="tabpanel" aria-labelledby="v-pills-contractorBadge-tab">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label for="name">Category</label>
                                        <select name="contractor_badges_category" class="form-control">
                                            <option value="free">Free</option>
                                            <option value="paid">Paid</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="contractor_badge">Contractor Badges</label>
                                            <input id="contractor_badge" type="number" class="form-control" name="contractor_badges">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Contractor Badges Ends -->
                            <div class="tab-pane fade" id="v-pills-facia" role="tabpanel" aria-labelledby="v-pills-facia-tab">
                                <div class="form-group">
                                    <label>Facia</label>
                                    <input type="text" name="faciaboard" class="form-control">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-brands" role="tabpanel" aria-labelledby="v-pills-brands-tab">
                                <div class="form-group">
                                    <label>Website</label>
                                    <input type="text" name="website" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="product">Products</label>
                                    <select data-tags="false" name="products[]" multiple id="product" tabindex="-1" class="form-control select2" style="width: 100%">
                                        @foreach($masters['products'] as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="brandsondisplay">Home Brands</label>
                                    <select name="brandsondisplay[]" style="width: 100%;" data-tags="true" tabindex="-1" id="" multiple class="form-control select2">
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="brandsondisplay_distributors">Distributors Of Brands</label>
                                    <select name="brandsondisplay_distributors[]" style="width: 100%;" data-tags="true" tabindex="-1" id="" multiple class="form-control select2">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="brandsondisplay_international">Inernational Brands</label>
                                    <select name="brandsondisplay_international[]" style="width: 100%;" data-tags="true" tabindex="-1" id="" multiple class="form-control select2">
                                    </select>
                                </div>
                            </div>
                            <div class="tab-pane fade paymentsTab" id="v-pills-payment" role="tabpanel" aria-labelledby="v-pills-payment-tab">
                            <div class="row" id="">
                                    <div class="col-lg-12">
                                        <table class="table table-bordered table-striped">
                                            <tr>
                                                <th>Cheque Number</th>
                                                <th>Cheque Date</th>
                                                <th>Drawn On</th>
                                                <th>Tds</th>
                                                <th>Amount</th>
                                                {{-- <th>Grand Total</th> --}}
                                                <th>Actions</th>
                                            </tr>
                                            <tr v-for="(payment, index) in payments">
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" required v-bind:name="'payments[' + index + '][cheque_number]'" v-model="payment.cheque_number" class="form-control">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="date" required v-bind:name="'payments[' + index + '][cheque_date]'" v-model="payment.cheque_date" class="form-control">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" required v-bind:name="'payments[' + index + '][drawn_on]'" v-model="payment.drawn_on" class="form-control">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="number" required v-bind:name="'payments[' + index + '][tds]'" v-model="payment.tds" class="form-control">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="number" required v-bind:name="'payments[' + index + '][amount]'" v-model="payment.amount" class="form-control">
                                                    </div>
                                                </td>
                                                {{-- <td>
                                                    <div class="form-group">
                                                        <input type="number" required v-bind:name="'payments[' + index + '][grand_total]'" v-model="payment.grand_total" class="form-control">
                                                    </div>
                                                </td> --}}
                                                <td>
                                                    <button class="btn btn-danger" type="button" @click="removePayment(index)"><i class="bi bi-trash"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="7">
                                                    <button type="button" class="btn btn-primary pull-right" @click="addPayment()">Add Payment</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                        <input type="submit" class="btn btn-primary submit_exhibitor" style="float:right" value="Submit">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ url('assets/js/form_validation.js') }}"></script>
<script>
    $(".selectContractor").click(function() {
        // Remove 'selected_contractor' class from all buttons
        $(".selectContractor").removeClass('selected_contractor');     
        // Reset the text to "Select" for all buttons
        $(".selectContractor").each(function() {
            $(this).find('.selectContractor').val('Select');
        });
        // Add 'selected_contractor' class to the clicked button
        var contractorValue = $(this).attr('data-id');
        $(this).addClass('selected_contractor').val('Selected');
        // Change the text to "Selected" for the clicked button
        // Set the hidden input or field value
        $("#contractorId").val(contractorValue);
    });
    $(document).ready(function(){
        $('.select2').select2({
            placeholder: "Type",
            theme: 'bootstrap'
        });
    });
    var stallsApp = new Vue({
        el: "#v-pills-stalls",
        data:{
            // stall_name: '',
            stall_category: {
                name: 'Please Select Category',
                value: ''
            },
            stall_area: {
                name: 'Please Select Area',
                value: ''
            },
            stall_name: {
                name: 'Please Select Stall',
                value: ''
            },
            // stall_area: '',
            stall_total: 0,
            stall_sgst: 0,
            stall_cgst: 0,
            stall_grand_total: '',
            stalls: [],
            discounted_value:'',
            discount:0,
            price_after_discount:0,
            categories: null,
            allStalls: null,
            stallsArea :null        },
        methods: {
            calculateTotal: function () {
                $(".currency_div").show();
                $(".stall_price").show();
                this.currency = this.currency;
                this.stall_total = this.stall_area.area * this.stall_price;
                if(this.discounted_value){
                    this.discounted_value = Math.round(this.stall_total - (this.stall_area.area * this.stall_price) * (this.discount)/100);
                    this.stall_cgst = Math.round(((this.discounted_value * (9))/100));
                    this.stall_sgst = Math.round(((this.discounted_value * (9))/100));
                    this.stall_grand_total = Math.round(this.discounted_value + this.stall_cgst + this.stall_sgst);
                }else{
                    this.stall_cgst = Math.round(((this.stall_total * (9))/100));
                    this.stall_sgst = Math.round(((this.stall_total * (9))/100));
                    this.stall_grand_total = Math.round(this.stall_total + this.stall_cgst + this.stall_sgst); 
                }
            },
            addDiscount:function(){
                this.discounted_value = Math.round(this.stall_total - (this.stall_area.area * this.stall_price) * (this.discount)/100);
                this.discounted_amount = Math.round((this.stall_area.area * this.stall_price) * (this.discount)/100);
                this.stall_cgst = Math.round(((this.discounted_value * (9))/100));
                this.stall_sgst = Math.round(((this.discounted_value * (9))/100));
                this.stall_grand_total = Math.round(this.discounted_value + this.stall_cgst + this.stall_sgst);
            },
            addHallNo:function(){
                $(".hall_number_div").show();
                this.hall_no = this.stall_name.hall_no;
            },
            addStall: function() {
                if (this.stall_price == '') {
                    return;
                }

                this.stalls.push({
                    name: this.stall_name.stall_no,
                    category: this.stall_category.name,
                    price: this.stall_price,
                    hallno: this.hall_no,
                    currency: this.currency,
                    area: this.stall_area.area,
                    total: this.stall_total,
                    discount: this.discount,
                    discounted_amount: this.discounted_amount,
                    price_after_discount: this.discounted_value,
                    sgst: this.stall_sgst,
                    cgst: this.stall_cgst,//
                    grand_total: this.stall_grand_total
                });

                this.stall_name = {
                    name: 'Please Select Stall',
                    value: ''
                };;
                this.stall_category = {
                    name: 'Please Select Category',
                    value: ''
                };
                this.stall_area.area = "";
                this.stall_total = "";
                this.stall_sgst = "";
                this.stall_cgst = "";
                this.stall_grand_total= "";
                this.discount="";
                this.discounted_value="";
                $(".hall_number_div").hide();
                $(".currency_div").hide();
            },
            removeStall: function(index) {
                this.stalls.splice(index, 1);
            },
        }
    });
    // Power
    var powerSuppliesApp = new Vue({
        el: '#v-pills-power',
        data: {
            powerSupplies: null,
            selectedPowerRequirements: [],
            power_requirement: {
                sub_total: 0,
                sgst: 0,
                cgst: 0,
                grand_total: 0,
            },
        },
        methods: {
            updateTotal: function(index) {
                this.selectedPowerRequirements[index].total = this.selectedPowerRequirements[index].rate_per_kw * this.selectedPowerRequirements[index].power_required;
                this.resetPowerRequirementTotal();
            },
            selectPowerSupply: function(index) {
                this.selectedPowerRequirements.push({
                    type: this.powerSupplies[index].type,
                    rate_per_kw: this.powerSupplies[index].price,
                    power_required: 1,
                    phase: '',
                    total: this.powerSupplies[index].price,
                });
                this.updateTotal(index);
                this.resetPowerRequirementTotal();
            },
            removePowerSupply: function(index) {
                this.selectedPowerRequirements.splice(index, 1);
                this.resetPowerRequirementTotal();
            },
            resetPowerRequirementTotal: function() {
                var base_total = this.selectedPowerRequirements.reduce(function(total, powerSupply) {
                    if (powerSupply.power_required) {
                        return total + parseFloat(powerSupply.total);
                    }
                    return total;
                }, 0);
                this.power_requirement.sub_total = base_total;
                this.power_requirement.cgst = base_total * (9/100);
                this.power_requirement.sgst = base_total * (9/100);
                this.power_requirement.grand_total = base_total + this.power_requirement.cgst + this.power_requirement.sgst;
            }
        }
    });
    // Furniture
    var furnituresApp = new Vue({
        el: '#v-pills-furniture',
        data: {
            furnitures: null,
            selectedFurnitures: [],
            furniture_requirement: {
                sub_total: 0,
                cgst: 0,
                sgst: 0,
                grand_total: 0
            }
        },
        methods: {
            selectFurniture: function(index) {
                this.selectedFurnitures.push({
                    name: this.furnitures[index].name,
                    furniture_required: 1,
                    price: this.furnitures[index].price,
                    total: this.furnitures[index].price
                });
                this.updateGrandTotal();
            },
            updateFurnitureTotal: function(index) {
                if (this.selectedFurnitures[index].furniture_required <= 0) {
                    this.selectedFurnitures[index].furniture_required = 1;
                }
                this.selectedFurnitures[index].total = this.selectedFurnitures[index].price * this.selectedFurnitures[index].furniture_required;
                this.updateGrandTotal();
            },
            removeFurniture: function(index) {
                this.selectedFurnitures.splice(index, 1);
                this.updateGrandTotal();
            },
            updateGrandTotal: function() {
                var subTotal = this.selectedFurnitures.reduce(function(total, furniture){
                    return total + parseFloat(furniture.total);
                }, 0);
                this.furniture_requirement.sub_total = subTotal;
                this.furniture_requirement.sgst = subTotal * (9/100);
                this.furniture_requirement.cgst = subTotal * (9/100);
                this.furniture_requirement.grand_total = this.furniture_requirement.sub_total + this.furniture_requirement.sgst + this.furniture_requirement.cgst;
            }
        }
    });
    // Payment
    var paymentsApp = new Vue({
        el: '.paymentsTab',
        data: {
            payments: []
        },
        methods: {
            addPayment: function(){
                this.payments.push({
                    cheque_number: '',
                    cheque_date: '',
                    drawn_on: '',
                    amount: ''
                });
            },
            removePayment: function(index) {
                this.payments.splice(index, 1);
            }
        }
    })
    // Advertisement
    var advertisementsApp = new Vue({
    el: '#v-pills-catalogue',
    data: {
        advertisements: null,
        selectedAdvertisements: [],
        advertisement_requirement: {
            sub_total: 0,
            cgst: 0,
            sgst: 0,
            grand_total: 0
        }
    },
    methods: {
        selectAdvertisement: function(index) {
            this.selectedAdvertisements.push({
                name: this.advertisements[index].name,
                advertisement_required: 1,
                price: this.advertisements[index].price,
                total: this.advertisements[index].price
            });
            this.updateGrandTotal();
        },
        updateAdvertisementTotal: function(index) {
            if (this.selectedAdvertisements[index].advertisement_required <= 0) {
                this.selectedAdvertisements[index].advertisement_required = 1;
            }
            this.selectedAdvertisements[index].total = this.selectedAdvertisements[index].price * this.selectedAdvertisements[index].advertisement_required;
            this.updateGrandTotal();
        },
        removeAdvertisement: function(index) {
            this.selectedAdvertisements.splice(index, 1);
            this.updateGrandTotal();
        },
        updateGrandTotal: function() {
            var subTotal = this.selectedAdvertisements.reduce(function(total, advertisement){
                return total + parseFloat(advertisement.total);
            }, 0);
            this.advertisement_requirement.sub_total = subTotal;
            this.advertisement_requirement.sgst = subTotal * (9/100);
            this.advertisement_requirement.cgst = subTotal * (9/100);
            this.advertisement_requirement.grand_total = this.advertisement_requirement.sub_total + this.advertisement_requirement.sgst + this.advertisement_requirement.cgst;
        }
    }
});
</script>
@endsection