@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Facility Vendor')
@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/style.css') }}">
@endsection

<style>
    .error {
        color: red;
    }
    table tr td{
        font-size:13px !important;
    }

    table tr th{
        vertical-align: middle !important;
    }
</style>

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Edit Facility Vendor</h4>
                    </div>
                    <div class="card-body">

                        <form class="form" action="{{ route('rental.facility-vendors.update', $vendor->id) }}" id="createForm" method="POST">
                            @csrf
                            <input type="hidden" id="vendor_id" name="id" value="{{ old('id', $vendor->_id) }}">
                            @method('PUT')
                                <div class="row">
                                    <div class="col-md-6 col-12 mb-1">
                                        <label class="form-label" for="code-column">Code</label>
                                        <input type="text" id="code-column" class="form-control" placeholder="Supplier Code"
                                            name="code" maxlength="7" value="{{ old('code', $vendor->code) }}"
                                            disabled />

                                    </div>
                                </div>
                                <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column">Name <span
                                                class="text-danger">*</span></label>
                                        <input type="text" id="name-column" class="form-control" placeholder="Name"
                                            name="name" value="{{ old('code', $vendor->name) }}" />
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name-column-email">Email</label>
                                        <input type="text" id="name-column-email" class="form-control"
                                            placeholder="Email" name="email" value="{{ old('code', $vendor->email) }}"/>
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 mb-1">
                                    <label class="form-label" for="name-column-cnic">CNIC <span
                                        class="text-danger">*</span></label>
                                    <input type="text" id="name-column-cnic" required class="form-control cnic"
                                        placeholder="XXXXX-XXXXXXX-X" name="cnic" value="{{ old('code', $vendor->cnic) }}" />
                                        @error('cnic')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="father_name">Father Name <span
                                                class="text-danger">*</span></label>
                                        <input type="text" id="father_name" class="form-control"
                                            placeholder="Father Name" name="father_name"
                                            value="{{ old('code', $vendor->father_name) }}" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 mb-1">
                                    <div class="mb-0">
                                        <label class="form-label" for="column-own-3">NTN#</label>
                                        <input type="text" id="column-own-3" class="form-control ntn"
                                            placeholder="Ntn Number" name="ntn" value="{{ old('ntn', $vendor->ntn) }}" />
                                    </div>
                                </div>
                                


                                    <div class="col-md-6 col-12 mb-1">
                                        <div class="mb-0">
                                            <label class="form-label" for="column-own-4">Business Name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" id="column-own-4" required class="form-control"
                                                placeholder="Business Name" name="business_name"
                                                value="{{ old('business_name', $vendor->business_name) }}" />
                                            @error('business_name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-1">
                                        <label class="form-label" for="mcc-contact">Contact# </label><span
                                            class="text-danger">*</span>
                                        <input type="text" id="mcc-contact" class="form-control phone"
                                            name="contact" placeholder="+92-3XX-XXXXXXX"
                                            value="{{ old('contact', $vendor->contact) }}" />
                                    </div>

                                    <div class="col-md-6 mb-1">
                                            <label class="form-label" for="column-ao5">WhatsApp #</label>
                                            <input type="text" id="column-ao5" class="form-control phone"
                                                placeholder="+92-3XX-XXXXXXX" name="whatsapp"
                                                value="{{ old('whatsapp', $vendor->whatsapp) }}" />
                                    </div>
                                    <div class="col-lg-6 mb-1">
                                            <label class="form-label" for="district">District</label>
                                            <select class="form-control select2" name="district_id" required
                                                id="districtSelect">
                                                <option value="">District</option>
                                                @foreach ($districts as $district)
                                                    <option value="{{ $district->id }}"
                                                        {{ $district->_id == $vendor->district_id ? 'Selected' : '' }}>
                                                        {{ $district->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('district_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                    </div>
                                    <div class="col-lg-6 mb-1">
                                            <label class="form-label" for="tehsil">Tehsil</label>
                                            <select class="form-control select2" name="tehsil_id" required id="tehsilSelect">
                                                <option value="">Tehsil</option>
                                                @foreach ($tehsils as $tehsil)
                                                    <option value="{{ $tehsil->id }}"
                                                        {{ $tehsil->_id == $vendor->tehsil_id ? 'Selected' : '' }}>
                                                        {{ $tehsil->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('tehsil_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                    </div>
                                    <div class="col-md-6 mb-1">
                                        <label class="form-label" for="plant-longitude">Address</label><span
                                            class="text-danger">*</span>
                                        <textarea rows="4" name="address" class="form-control custom_adress" type="text" placeholder="Location">{{ old('address', $vendor->address) }}</textarea>
                                        <div class="invalid-feedback address"></div>
                                    </div>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <ul class="nav nav-tabs scroller" id="myTab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="access-dtl-tab" data-toggle="tab"
                                                href="#access-tab" role="tab" aria-controls="access-tab"
                                                aria-selected="true">Access Details</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="bank-dtl-tab" data-toggle="tab"
                                                href="#bank-tab" role="tab" aria-controls="bank-tab"
                                                aria-selected="true">Bank Details</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="next-of-kin-dtls-tab" data-toggle="tab"
                                                href="#next-of-kin-tab" role="tab" aria-controls="next-of-kin-tab"
                                                aria-selected="false">Next of Kin</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="agreement-info-tab" data-toggle="tab"
                                                href="#agreement-info" role="tab" aria-controls="agreement-info"
                                                aria-selected="false">Agreement</a>
                                        </li>
                                        {{-- <li class="nav-item">
                                            <a class="nav-link" id="other-dtls-tab" data-toggle="tab" href="#other-tab"
                                                role="tab" aria-controls="other-tab" aria-selected="false">Other
                                                Details</a>
                                        </li> --}}
                                        <li class="nav-item">
                                            <a class="nav-link" id="additional-info-tab" data-toggle="tab"
                                                href="#additional-info" role="tab" aria-controls="additional-info"
                                                aria-selected="false">Additional Info.</a>
                                        </li>
                                        {{-- <li class="nav-item">
                                            <a class="nav-link disabled cps" data-toggle="tab" href="#cps-tab"
                                                role="tab" aria-controls="cps-tab" aria-selected="true">Collection
                                                Points</a>
                                        </li> --}}

                                        {{-- <li class="nav-item locations" style="display: none">
                                            <a class="nav-link" data-toggle="tab" href="#location-tab" role="tab"
                                                aria-controls="location-tab" aria-selected="true">Location Details</a>
                                        </li> --}}
                                    </ul>
                                    <div class="tab-content tab-data" style="padding: 5px;" id="myTabContent">
                                        <div class="tab-pane fade show active" id="access-tab" role="tabpanel"
                                            aria-labelledby="access-dtl-tab">
                                            <div class="row">
                                                <div class="col-md-12 mb-1">
                                                    <h5>
                                                        Current Access : 
                                                        @if ($vendor->plant)
                                                            {{ $vendor->plant->name }}
                                                            
                                                        @elseif ($vendor->ao)
                                                            {{ $vendor->ao->ao_name }}

                                                        @else
                                                            N/A
                                                        @endif
                                                    </h5>
                                                </div>
                                                <div class="col-md-4 col-6 ">
                                                    <label class="form-label">Select Access Type</label>
                                                    <div class="mb-1">
                                                        <select name="parent" id="parent" class="form-control select2" required onchange="getSelectedParent()">
                                                            <option value="" selected="" disabled="">Select Access</option>
                                                            <option value="plant">Plant</option>
                                                            <option value="ao">Area Office</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                @include('content._partials._sections.facility_vendor_access')
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="bank-tab" role="tabpanel"
                                            aria-labelledby="bank-dtl-tab">
                                            <div class="row">
                                                @include('content._partials._sections.edit_bank', [
                                                    'bank_detail' => $vendor,
                                                ])
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="next-of-kin-tab" role="tabpanel"
                                        aria-labelledby="next-of-kin-dtls-tab">
                                        <div class="row">
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="column-own-10">Name</label>
                                                    <input type="text" id="column-own-10" class="form-control"
                                                        placeholder="Name" name="next_of_kin_name"
                                                        value="{{ old('next_of_kin_name', $vendor->next_of_kin_name) }}" />
                                                    @error('next_of_kin_name')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="column-own-11">Father Name</label>
                                                    <input type="text" id="column-own-11" class="form-control"
                                                        placeholder="Father Name" name="next_of_kin_father_name"
                                                        value="{{ old('next_of_kin_father_name', $vendor->next_of_kin_father_name) }}" />
                                                    @error('next_of_kin_father_name')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="column-own-12">Relation with
                                                        Supplier</label>
                                                    <input type="text" id="column-own-12" class="form-control"
                                                        placeholder="Relation" name="relation"
                                                        value="{{ old('relation', $vendor->relation) }}" />

                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="column-own-13">Contact #</label>
                                                    <input type="text" id="column-own-13"
                                                        class="form-control phone" placeholder="+92-3XX-XXXXXXX"
                                                        name="next_of_kin_contact"
                                                        value="{{ old('next_of_kin_contact', $vendor->next_of_kin_contact) }}" />

                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="column-own-13">Cnic</label>
                                                    <input type="text" id="column-own-13"
                                                        class="form-control cnic" placeholder="XXXXX-XXXXXX-X"
                                                        name="next_of_kin_cnic"
                                                        value="{{ old('next_of_kin_cnic', $vendor->next_of_kin_cnic) }}" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="agreement-info" role="tabpanel"
                                    aria-labelledby="agreement-info-tab">
                                    <section id="agrrement_div">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card">
                                                    <div class="row border-bottom">
                                                    <div class="card-body">
                                                        <div class="card-datatable table-responsive">
                                                            <table class="table" id="agreement_details_table">
                                                                <thead>
                                                                    <tr>
                                                                        <th rowspan="2" >AGR #</th>
                                                                        <th colspan="2" class="text-center" style="background-color: #b3fcfc">Facility</th>
                                                                        <th colspan="2" class="text-center" style="background-color: #bcff97">Duration</th>
                                                                        <th rowspan="2">Created by</th>
                                                                        <th rowspan="2">Date</th>
                                                                        <th rowspan="2">Action</th>
                                                                    </tr>
                                                                    <tr>

                                                                        <th>Name</th>
                                                                        <th>Type</th>
                                                                        <th>WEF</th>
                                                                        <th>To</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @isset($vendor->agreements)
                                                                        @forelse($vendor->agreements as $key=>$agr)
                                                                            <tr>
                                                                                <td>{{ $agr['code'] }}</td>
                                                                                <td>{{  $agr['facility'] ? $agr['facility']['name'] : 'N/A' }}</td>
                                                                                <td>

                                                                                    @php
                                                                                        $badgeMap = [
                                                                                            'plant' => ['label' => 'Plant', 'color' => '#db4243'],
                                                                                            'building' => ['label' => 'Plant Building', 'color' => '#e08465'],
                                                                                            'plant_mcc' => ['label' => 'Plant Collection Point', 'color' => '#eb7aa0'],
                                                                                            'ao' => ['label' => 'Area Office', 'color' => '#28A745'],
                                                                                            'dp' => ['label' => 'Dispatch Point', 'color' => '#20C997'],
                                                                                            'mcc' => ['label' => 'Collection Center', 'color' => '#007bff'],
                                                                                            'ao_building' => ['label' => 'Area Office Building', 'color' => '#008080'],
                                                                                        ];
                                                                                        $type = $agr['type'] ?? 'N/A';
                                                                                        $badge = $badgeMap[$type] ?? null;
                                                                                    @endphp

                                                                                    @if ($badge)
                                                                                        <span class="badge" style="background-color: {{ $badge['color'] }}; color: white;">
                                                                                            {{ $badge['label'] }}
                                                                                        </span>
                                                                                    @else
                                                                                        N/A
                                                                                    @endif

                                                                                </td>
                                                                                <td>{{ $agr['wef_date'] }}</td>
                                                                                <td>{{ $agr['end_date'] }}</td>
                                                                                <td>{{  $agr['createdBy'] ? $agr['createdBy']['name'] : 'N/A' }}</td>
                                                                                <td>
                                                                                    {{$agr['created_at'] ? \Carbon\Carbon::parse( $agr['created_at'])->format('d-M-Y'): 'N/A',}}
                                                                                </td>
                                                                                <td>
                                                                                    <a title="View" href="{{ route('rental.facility-agreements.show', $agr['id']) }}" class="btn btn-icon btn-sm btn-primary mr_5px"><i class="fa-solid fa-eye"></i></a>
                                                                                </td>
                                                                            </tr>
                                                                    </tbody>
                                                                @empty
                                                                    <tr>
                                                                        <td colspan="6" class="text-center empty">
                                                                            No data found</td>
                                                                    </tr>
                                                                    @endforelse
                                                                @endisset
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>

                                </div>
                                        {{-- <div class="tab-pane fade" id="other-tab" role="tabpanel"
                                            aria-labelledby="other-dtls-tab">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="row">
                                                    <div class="col-lg-2 col-md-4 col-sm-3">
                                                        <h4>Milk Details</h4>
                                                    </div>
                                                    <div class="col-lg-10 col-md-8 col-sm-9">
                                                        <hr style="border-top: 1px solid #B7B6BE;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-10">Total
                                                            Production</label>
                                                        <div class="d-flex">
                                                            <input type="number" min="0" max="50000"
                                                                id="column-own-10" class="form-control"
                                                                placeholder="Total Production"
                                                                name="total_milk_production"
                                                                value="{{ old('total_milk_production') }}" />
                                                            <span><br>&nbsp;Ltr.</span>
                                                            @error('total_milk_production')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-12">Available for
                                                            Sale</label>
                                                        <div class="d-flex">
                                                            <input type="number" min="0" max="50000"
                                                                id="column-own-12" class="form-control"
                                                                placeholder="Available for Sale"
                                                                name="milk_available_for_sale"
                                                                value="{{ old('milk_available_for_sale') }}" />
                                                            <span><br>&nbsp;Ltr.</span>
                                                            @error('milk_available_for_sale')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-12">Current
                                                            Price</label>
                                                        <div class="d-flex">
                                                            <input type="number" min="1" max="10000"
                                                                id="column-own-12" class="form-control"
                                                                placeholder="Price per litre" name="price_per_litre"
                                                                value="{{ old('price_per_litre') }}" />
                                                            <span><br>&nbsp;Rs./Ltr.</span>
                                                            @error('price_per_litre')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="currently_supplying_to">Currently
                                                            Supplying To *</label>
                                                        <input type="text" id="currently_supplying_to"
                                                            class="form-control" name="currently_supplying_to"
                                                            placeholder="Currently Supplying To"
                                                            value="{{ old('currently_supplying_to') }}" />
                                                        @error('currently_supplying_to')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-4 col-sm-4">
                                                        <h4>Animal Details</h4>
                                                    </div>
                                                    <div class="col-lg-9 col-md-8 col-sm-8">
                                                        <hr style="border-top: 1px solid #B7B6BE;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-3">Milking</label>
                                                        <input type="number" min="0" max="1000"
                                                            id="column-own-3" class="form-control"
                                                            placeholder="Milking Animals" name="milking_animals"
                                                            value="{{ old('milking_animals') }}" />
                                                        @error('milking_animals')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-a">Dry</label>
                                                        <input type="number" min="0" max="1000"
                                                            id="column-own-a" class="form-control"
                                                            placeholder="Dry Animals" name="dry_animals"
                                                            value="{{ old('dry_animals') }}" />
                                                        @error('dry_animals')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-2">Total</label>
                                                        <input type="number" min="1" max="1000"
                                                            id="column-own-2" class="form-control"
                                                            placeholder="No. of Animals" name="no_of_animals"
                                                            value="{{ old('no_of_animals') }}" />
                                                        @error('no_of_animals')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-b">Heifers</label>
                                                        <input type="number" min="0" max="1000"
                                                            id="column-own-b" class="form-control"
                                                            placeholder="No. of Heifers" name="heifers"
                                                            value="{{ old('heifers') }}" />
                                                        @error('heifers')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-q">Young Stock</label>
                                                        <input type="number" min="0" max="1000"
                                                            id="column-own-q" class="form-control"
                                                            placeholder="No. of Young Stock" name="young_stock"
                                                            value="{{ old('young_stock') }}" />
                                                        @error('young_stock')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="columnn132">Vaccination &
                                                            Deworming</label>
                                                        <select name="have_vaccinated" class="select2 form-select">
                                                            <option value="1">Yes</option>
                                                            <option value="0">No</option>
                                                        </select>
                                                        @error('have_vaccinated')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="row">
                                                    <div class="col-lg-2 col-md-4 col-sm-4">
                                                        <h4>Shed Details</h4>
                                                    </div>
                                                    <div class="col-lg-10 col-md-8 col-sm-8">
                                                        <hr style="border-top: 1px solid #B7B6BE;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="column-own-aq">Dimensions of
                                                            shed</label>
                                                        <div class="col-lg-12 col-md-12 col-12 shed-dimensions">
                                                            <div class="row">
                                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                                    <input type="number" id="column-own-aq"
                                                                        class="form-control" placeholder="width"
                                                                        name="shed_dimension_width"
                                                                        value="{{ old('shed_dimension_width') }}" />
                                                                </div>
                                                                <div class="col-lg-2 col-md-2 col-sm-2 shed-dimensions"
                                                                    style="margin-top: 10px; text-align:center; font-weight: bold;">
                                                                    <p>X</p>
                                                                </div>
                                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                                    <input type="number" id="column-own-aq"
                                                                        class="form-control" placeholder="Height"
                                                                        name="shed_dimension_height"
                                                                        value="{{ old('shed_dimension_height') }}" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="columnn132">Direction</label>
                                                        <input type="text" id="columnn132" class="form-control"
                                                            placeholder="Direction Of Shed" name="direction_of_shed"
                                                            value="{{ old('direction_of_shed') }}" />
                                                        @error('direction_of_shed')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="columnn2">Open Area (Square
                                                            Meter)</label>
                                                        <input type="text" id="columnn2" class="form-control"
                                                            placeholder="Open Area in SqrMtr. " name="open_area"
                                                            value="{{ old('open_area') }}" />
                                                        @error('open_area')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label" for="columnn32">No. of Water
                                                            Troughs</label>
                                                        <input type="number" min="0" max="10000"
                                                            id="columnn32" class="form-control"
                                                            placeholder="Total Water Troughs" name="water_trough"
                                                            value="{{ old('water_trough') }}" />
                                                        @error('water_trough')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                        <div class="tab-pane fade" id="additional-info" role="tabpanel"
                                            aria-labelledby="additional-info-tab">
                                            <div class="col-lg-12 col-md-12 col-12">
                                                <div class="row">
                                                    <div class="col-lg-1 col-md-1 col-sm-1"
                                                        style="margin-top: 10px; text-align:center; font-weight: bold;">
                                                        <p>FF-1</p>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                                        <input type="text" id="column-own-aq" name="ff_1"
                                                            class="form-control" placeholder="FF-3" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-12 mt-1">
                                                <div class="row">
                                                    <div class="col-lg-1 col-md-1 col-sm-1"
                                                        style="margin-top: 10px; text-align:center; font-weight: bold;">
                                                        <p>FF-2</p>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                                        <input type="text" id="column-own-aq" class="form-control"
                                                            placeholder="FF-2" name="ff_2" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-12 mt-1">
                                                <div class="row">
                                                    <div class="col-lg-1 col-md-1 col-sm-1"
                                                        style="margin-top: 10px; text-align:center; font-weight: bold;">
                                                        <p>FF-3</p>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                                        <input type="text" id="column-own-aq" class="form-control"
                                                            placeholder="FF-3" name="ff_3" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="row mt-1">
                                    <div class="col-12">
                                        <button type="submit" id="save_button"
                                            class="btn btn-primary me-1">Submit</button>
                                        <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                        <a class="btn btn-outline-secondary cancel-btn"
                                            href="{{ route('rental.facility-vendors.index') }}">Cancel</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>

    <script src="{{ asset('vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>

@endsection
@section('page-script')
    <!-- Page js files -->
    <script src="{{ asset('js/scripts/forms/pickers/form-pickers.js') }}"></script>
    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>

    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.css"
        integrity="sha512-8D+M+7Y6jVsEa7RD6Kv/Z7EImSpNpQllgaEIQAtqHcI0H6F4iZknRj0Nx1DCdB+TwBaS+702BGWYC0Ze2hpExQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"
        integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

    <script>
        $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp,.user').hide();

        function getSelectedParent()
        {
            $('#errorMsg').html('');
            var parentValue = $('#parent').val();

            $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp,.user').hide();

            if (parentValue !== "") {
                
                // $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp').show();
                setTimeout(function() {
                    $('.plant, .department, .section, .zone, .ao').show();
                     $('#item,#packing_search,#quantity').prop('disabled', false);
                }, 900);

                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search').val('');
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search').trigger('change'); 
                
                if(parentValue == "plant")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao').hide();
                    }, 900);

                    $('#area_office_search').prop('disabled', true);   
                }
                else if(parentValue == "ao")
                {
                    // setTimeout(function() {
                    //     $('.dp,.cp,.bd,.user,.spinner').hide();
                    // }, 900);

                    $('#area_office_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#building_search,#user_search').prop('disabled', true);   
                }
                else
                {
                    $('#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search,#user_search').prop('disabled', false);
                }

            }
        }

        $.validator.addMethod("fixed_iban", function(value, element) {
            var iban = value.replace(/[^a-zA-Z0-9]/g, '');
            return iban.length === 24;
        }, "IBAN must be a valid 24 charcters.");

        $('#createForm').validate({
            rules: {
                bank_account_no: {
                    required: true,
                    fixed_iban: true
                }
            },
            messages: {
                bank_account_no: {
                    required: "Please enter your IBAN."
                }
                // Add other error messages for your form fields
            },
        });

        $(document).on('submit', '#createForm', function(e) {
          
            $('#save_button').prop('disabled', true);
            $('#save_button').removeClass('btn-primary')
            $('#save_button').addClass('btn-danger')
            e.preventDefault();
            let data = $(this).serialize();
            // console.log(data);
            $.ajax({
                url: '{{ route('rental.facility-vendors.update',$vendor->id) }}',
                method: 'PUT',
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#save_button').prop('disabled', true);
                        showAlert('success', response.message);
                        $(window).scrollTop(20);
                        $("input").css('border', '1px solid #d8d6de')
                        $("select").css('border', '1px solid #d8d6de')

                        $('#save_button').addClass('btn-primary')
                        $('#save_button').removeClass('btn-danger')
                    } else {
                        $('#save_button').prop('disabled', false);
                        $("input").css('border', '1px solid #d8d6de')
                        $("select").css('border', '1px solid #d8d6de')
                        $.toast({
                            text: response.message,
                            icon: 'error',
                            position: 'top-right',
                            hideAfter: 7000,
                        })
                        if (response.key) {
                            $(window).scrollTop(10);
                            $("*[name='" + response.key + "']").css('border', '1px solid red')
                        }
                        $('#save_button').addClass('btn-primary')
                        $('#save_button').removeClass('btn-danger')

                    }
                }
            });
        })
    </script>

        {{-- <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> --}}
        <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>
    <script>
        // script for shifting tabs
        $(document).ready(function() {
            $('#myTab a').on('click', function(e) {
                e.preventDefault();
                $(this).tab('show');
            });

            $('#districtSelect').change(function() {
                var id = $(this).val();
                if (id) {
                    $.ajax({
                        url: '{{ route('get.tehsils', ':id') }}'.replace(':id', id),
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#tehsilSelect').empty();
                            $('#tehsilSelect').append(
                                '<option value="">Tehsil</option>');
                            $.each(data, function(key, value) {
                                $('#tehsilSelect').append('<option value="' + key +
                                    '">' +
                                    value + '</option>');
                            });
                        }
                    });
                }
            });
        });

        $('.cnic').inputmask({
            mask: '99999-9999999-9'
        });
        $('.phone').inputmask({
            mask: '+\\92-399-9999999'
        });
        $('.ntn').inputmask({
            mask: '99999-9999999-9'
        });

    </script>
@endsection