@extends('layout.app')

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('taginput/bootstrap-tagsinput.css') }}" crossorigin="anonymous"
        referrerpolicy="no-referrer">
    <style type="text/css">
        .bootstrap-tagsinput {
            width: 100%;
        }

        .label-info {
            background-color: rgb(36, 219, 204);
        }

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

@section('content')
    <form action="{{ route('clients.store') }}" method="POST" class="form" enctype="multipart/form-data">
        @csrf

        <input type="hidden" id="uuid" name="uuid" value="{{ createUUID() }}">
        <div class="card">
            <div class="card-body">
                @can('form-setting')
                    @if (globalPermission('customer-form-field-control'))
                        <div class="header" style="text-align: right">
                            <h2>
                                <a href="{{ route('formSetting') }}" target="_blank">
                                    <i class="fa fa-cog" aria-hidden="true"></i></a>
                            </h2>
                        </div>
                    @endif
                @endcan

                @if (checkSettings('pictureUpload') == 'enable' &&
                        showAnyFormField(['customer_profile_picture', 'customer_agrement', 'form_picture', 'building_photo', 'client_door_picture']))
                    <div class="row" id="file_info" style="display: none">
                        @if (showFormField('customer_profile_picture'))
                            <div class="form-group col-sm-2">
                                <label for="customer_profile_picture" class="block pt-2">
                                    Profile Picture{{ checkRequired('customer_profile_picture', '*') }}
                                </label>
                                <input type="file" name="customer_profile_picture" id="customer_profile_picture"
                                    accept="image/*" class="form-control-file"
                                    {{ checkRequired('customer_profile_picture', 'required') }}>
                                @error('customer_profile_picture')
                                    <p class="btn btn-danger mb-2"> {{ $message }} </p>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('customer_agrement'))
                            <div class="form-group col-sm-2">
                                <label for="customer_agrement" class="block pt-2">
                                    Customer Agrement{{ checkRequired('customer_agrement_required', '*') }}
                                </label>
                                <input type="file" name="customer_agrement" id="customer_agrement" accept="image/*"
                                    class="form-control-file" {{ checkRequired('customer_agrement_required', 'required') }}>
                                @error('customer_agrement')
                                    <p class="btn btn-danger mb-2"> {{ $message }} </p>
                                @enderror
                            </div>
                        @endif

                        @if (showFormField('form_picture'))
                            <div class="form-group col-sm-2">
                                <label for="profilePicture" class="block pt-2">
                                    Form Picture{{ checkRequired('profilePicture', '*') }}
                                </label>
                                <input type="file" name="profilePicture" id="profilePicture" accept="image/*"
                                    class="form-control-file" {{ checkRequired('profilePicture', 'required') }}>
                                @error('profilePicture')
                                    <p class="btn btn-danger mb-2"> {{ $message }} </p>
                                @enderror
                            </div>
                        @endif

                        @if (showFormField('building_photo'))
                            <div class="form-group col-sm-2">
                                <label for="picture" class="block pt-2">
                                    Building Photo{{ checkRequired('building_photo_required', '*') }}
                                </label>
                                <input type="file" name="picture" id="picture" accept="image/*" class="form-control-file"
                                    {{ checkRequired('building_photo_required', 'required') }}>
                                @error('picture')
                                    <p class="btn btn-danger mb-2"> {{ $message }} </p>
                                @enderror
                            </div>
                        @endif

                        @if (showFormField('client_door_picture'))
                            <div class="form-group col-sm-2">
                                <label for="client_door" class="block pt-2">
                                    Client Flat Door Picture{{ checkRequired('dore_picture_required', '*') }}
                                </label>
                                <input type="file" name="client_door" id="client_door" accept="image/*"
                                    class="form-control-file" {{ checkRequired('dore_picture_required', 'required') }}>
                                @error('client_door')
                                    <p class="btn btn-danger mb-2"> {{ $message }} </p>
                                @enderror
                            </div>
                        @endif
                    </div>
                @endif


                <div class="bg-primary">
                    <h4 style="text-align: center;">Service Information</h4>
                </div>
                @if (checkAPI())
                    <div class="form-group">
                        @can('ignore-mikrotik-check')
                            @if (showFormField('ignore_mikrotik_check'))
                                <label class="block">
                                    Ignore Mikrotik Check <input name="ignoreMkCheck" type="checkbox">
                                </label>
                            @endif
                        @endcan
                        @if (globalPermission('static_ip_manage') && Auth::user()->can('static_manage'))
                            <label class="block mx-5">
                                Static IP <input name="isStatic" type="checkbox" id="static">
                            </label>
                        @endif

                    </div>
                @endif

                <div class="row">

                    <div class="form-group col-sm-3" id="username">

                        <label for="userid" class="block ">PPPoE User Name*</label>

                        <input type="text" name="userid" id="userid" value="{{ old('userid') }}"
                            class="form-control" @if (checkSettings('userid') == 'enable') required @endif placeholder="User Name">
                        <div id="useridWarning"></div>
                        @error('userid')
                            <div class="alert alert-danger"> {{ $message }} </div>
                        @enderror
                    </div>

                    <div class="form-group col-sm-3" id="passwordElement">
                        <label for="password" class="block text-sm font-medium text-gray-700">
                            PPPoE Password*
                        </label>

                        <input type="text" name="password" id="password" value="{{ old('password') }}"
                            class="form-control " placeholder="Password">
                        @error('password')
                            <div class="alert alert-danger mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    @if (checkSettings('customer_code') == 'enable')
                        @if (showFormField('customer_code'))
                            <div class="form-group col-sm-3">
                                <label for="password" class="block text-sm font-medium text-gray-700">
                                    Customer Code @if (!globalPermission('autoGenerateCustomerCode'))
                                        *
                                    @endif
                                </label>

                                <input type="text" name="customer_code" id="customer_code"
                                    value="{{ old('customer_code') }}" class="form-control"
                                    @if (!globalPermission('autoGenerateCustomerCode')) required @endif
                                    placeholder="{{ globalPermission('autoGenerateCustomerCode') ? 'Leave empty to auto-generate' : 'customer code' }}">
                                <div id="customerCodeWarning"></div>
                                @error('customer_code')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    @endif

                    <div class="form-group col-sm-3">
                        <label for="pop_id" class="block">
                            Pop/Zone Name*
                        </label>

                        <select name="pop_id" id="pop_id" class="select2 form-control" required>
                            <option value="">Select Pop</option>
                            @foreach ($pop as $p)
                                <option class="p-5" data-billgenerate="{{ $p->bill_generate }}"
                                    value="{{ $p->id }}">{{ $p->popname }}</option>
                            @endforeach

                        </select>

                        @error('pop_id')
                            <div class="alert alert-danger mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- kalam --}}
                    @if (globalPermission('separate_billing_cycle_to_resellers'))
                        <div class="form-group col-sm-3">
                            <label for="billing_cycle" class="block ">
                                Billing Cycle*
                            </label>
                            <select name="billing_cycle" id="billing_cycle" class="form-control select2" required>
                                <option value="">Select Billing Cycle</option>
                            </select>
                        </div>
                    @else
                        @if (getBillingType() == 'day_to_day')
                            @can('day-to-day-reseller-full-date')
                                <div class="form-group col-sm-3">
                                    <label for="billing_cycle" class="block ">
                                        Billing Cycle*
                                    </label>
                                    <select name="billing_cycle" id="billing_cycle" class="form-control select2" required>
                                        <option value="">Select Billing Cycle</option>
                                        @foreach (explode(',', $confday) as $conf)
                                            <option value="{{ $conf }}">{{ $conf }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                @if (globalPermission('fixed_billing_cycle_of_d2d_manager'))
                                    {{-- The manager decides which days are allowed, so they are
                                         fetched once a POP is picked (see
                                         getFixedBillingCycleByPopId below). One day is filled in
                                         and locked; several become a real choice; none falls back
                                         to the same today/yesterday value this field showed
                                         before this option existed.

                                         It starts empty rather than pre-filled: until a POP is
                                         chosen there is no manager to ask, and showing a guessed
                                         day the operator did not pick reads as a real value. It
                                         is required, so an empty one cannot be submitted - and
                                         POP is required too, so it is always filled by the time
                                         the form can go. --}}
                                    <div class="form-group col-sm-3" id="billing_cycle_wrap">
                                        <label for="billing_cycle" class="block ">
                                            Billing Cycle*
                                        </label>
                                        <select name="billing_cycle" id="billing_cycle" class="form-control select2"
                                            required
                                            data-fallback="{{ globalPermission('set-expire-date-today-on-create-d2d') ? today()->format('d') : today()->subDay()->format('d') }}">
                                            <option value="">Select Pop First</option>
                                        </select>

                                        @error('billing_cycle')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror

                                    </div>
                                @elseif (globalPermission('set-expire-date-today-on-create-d2d'))
                                    <div class="form-group col-sm-3">
                                        <label for="billing_cycle" class="block ">
                                            Billing Cycle*
                                        </label>
                                        <select name="billing_cycle" id="billing_cycle" class="form-control select2"
                                            required>

                                            <option value="{{ today()->format('d') }}">
                                                {{ today()->format('d') }}</option>

                                        </select>

                                        @error('billing_cycle')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror

                                    </div>
                                @else
                                    <div class="form-group col-sm-3">
                                        <label for="billing_cycle" class="block ">
                                            Billing Cycle*
                                        </label>
                                        <select name="billing_cycle" id="billing_cycle" class="form-control select2"
                                            required>

                                            <option value="{{ today()->subDay()->format('d') }}">
                                                {{ today()->subDay()->format('d') }}</option>

                                        </select>

                                        @error('billing_cycle')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror

                                    </div>
                                @endif
                            @endcan
                        @else
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block ">
                                    Billing Cycle*
                                </label>
                                <select name="billing_cycle" id="billing_cycle" class="form-control select2" required>
                                    <option value="">Select Billing Cycle</option>
                                    @foreach (explode(',', $confday) as $conf)
                                        <option value="{{ $conf }}">{{ $conf }}</option>
                                    @endforeach
                                </select>

                                @error('billing_cycle')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror

                            </div>
                        @endif
                    @endif


                    <div class="form-group col-sm-3">
                        <label for="package_id" class="block text-sm font-medium text-gray-700">
                            Package Name*
                        </label>

                        <select name="package_id" id="package_id" class="form-control select2" required>
                            <option value="">Select Pop First</option>
                        </select>

                        @error('package_id')
                            <div class="alert alert-danger mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    @if (globalPermission('free-day-to-create-customer'))
                        @if (showFormField('free_day_to_create_customer'))
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block pt-2">
                                    Free Day to Create Customer *
                                </label>
                                <input type="number" name="free_day_to_create_customer" id="free_day_to_create_customer"
                                    class="form-control" placeholder="Free Day to Create Customer"
                                    max="{{ siteinfo()->max_free_day }}" value="{{ old('free_day_to_create_customer') }}">

                                @error('free_day_to_create_customer')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    @endif

                    <div class="form-group col-sm-3 @if (getBillingType() == 'day_to_day' || config('app.full_month_bill_for_new_customer')) d-none @endif">
                        <div class="row">
                            @if (showFormField('expire_date'))
                                <div class="col-md-8">
                                    <label for="password" class="block pt-2">
                                        Expired Date
                                    </label>
                                    <div id="cost_message"></div>
                                </div>
                            @endif

                            {{-- Payment status is a billing input, not a display field, so it stays on
                                 the form whatever Exp Date is set to — dropping it would post no
                                 bill_amount_paid at all. --}}
                            <div class="col-md-4" id="bill_payment_status" style="display: none">
                                <label for="">Select Payment Status</label>

                                @if (checkSettings('on-create-customer-auto-payment') == 'enable')
                                    <label for="paid"><input type="radio" id="paid" name="bill_amount_paid"
                                            value="1" required checked> Bill Amount Paid</label>
                                @else
                                    <label for="not_paid">
                                        <input type="radio" id="not_paid" name="bill_amount_paid" value="0"
                                            required checked>
                                        Bill Amount Not Paid</label>
                                @endif
                            </div>
                        </div>

                    </div>

                    @if (checkSettings('static_ip_manage') == 'enable')
                        @if (showFormField('ethernet_port'))
                            <div class="form-group col-sm-3 d-none" id="selectInterface">
                                <label for="" class="block text-sm font-medium text-gray-700">
                                    Ethernet Port
                                </label>

                                <select name="ethernet_port" id="port" class="form-control select2">
                                    <option value="">Select Ethernet Port</option>

                                </select>

                                @error('port')
                                    <div class="alert alert-danger mt-1">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        @endif
                    @endif


                    @if (showFormField('static_ip'))
                        <div class="form-group col-sm-3">
                            <label for="client_name" class="block ">
                                Static IP <input type="checkbox" id="isStaticIpOk">
                            </label>
                            @if (!checkAPI())
                                <input style="display: none" type="text" name="static_ip" id="static_ip"
                                    value="{{ old('static_ip') }}" class="form-control " placeholder="Static IP">
                                @error('static_ip')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            @else
                                @if (checkSettings('static-ip-check') == 'enable')
                                    <select class="form-control" name="static_ip" id="static_ip" style="display:none;">

                                    </select>
                                @elseif(checkSettings('static_ip_manage') == 'enable')
                                    <select class="form-control web" name="static_ip" id="static_ip">

                                    </select>
                                @else
                                    <input style="display: none" type="text" name="static_ip" id="static_ip"
                                        value="{{ old('static_ip') }}" class="form-control " placeholder="Static IP">
                                    @error('static_ip')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                @endif
                            @endif
                        </div>
                    @endif
                    @if (checkSettings('ipv_6_for_radius') == 'enable')
                        @if (showFormField('ipv6'))
                            <div class="form-group col-sm-3">
                                <label for="mac" class="block">
                                    Static Ip of IPv6 (if any)
                                </label>

                                <input type="text" name="ipv6" id="ip6" value="{{ old('ipv6') }}"
                                    class="form-control " placeholder="Enter ipv6" autocomplete="off">
                                @error('ipv6')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror

                            </div>
                        @endif
                    @endif


                    @if (showFormField('mac'))
                        <div class="form-group col-sm-3">
                            <label for="mac" class="block">
                                Enable MAC
                            </label>

                            <input type="text" name="mac" id="mac" value="{{ old('mac') }}"
                                class="form-control " placeholder="Enable Mac">
                            @error('mac')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    @if (checkSettings('radius_customer_bandwidth_limit') == 'enable')
                        @can('apply-bandwidth-limit')
                            @if (showFormField('bandwidth_limit'))
                                <div class="form-group col-sm-3" id="">
                                    <label for="bandwidth_limit" class="block">
                                        Bandwidth Limit(MB) - Ignore <input name="apply_bandwidth_limit" type="checkbox">
                                    </label>
                                    <input type="number" name="bandwidth_limit" id="bandwidth_limit" value=""
                                        class="form-control " placeholder="Bandwidth Limit">
                                    @error('bandwidth_limit')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                        @endcan
                    @endif

                    @if (showFormField('distribution_point'))
                        <div class="form-group col-sm-3">
                            <label for="distribution_point" class="block">
                                Distribution Point @if (checkSettings('btrc_report_field_required') == 'enable')
                                    *
                                @endif
                            </label>
                            <select name="distribution_point" id="" class="form-control select2"
                                @if (checkSettings('btrc_report_field_required') == 'enable') required @endif>
                                <option value="">Select One</option>
                                <option value="pop">POP</option>
                                <option value="noc">NOC</option>
                            </select>
                            @error('distribution_point')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @endif
                    @if (showFormField('connection_type'))
                        <div class="form-group col-sm-3">
                            <label for="connection_type" class="block">
                                Connection Type @if (checkSettings('btrc_report_field_required') == 'enable')
                                    *
                                @endif
                            </label>
                            <select name="connection_type" id="" class="form-control select2"
                                @if (checkSettings('btrc_report_field_required') == 'enable') required @endif>
                                <option value="">Select One</option>
                                <option value="shared">Shared</option>
                                <option value="dedicated">Dedicated</option>
                            </select>
                            @error('connection_type')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @endif
                    @if (showFormField('customer_type'))
                        <div class="form-group col-sm-3">
                            <label for="customer_type" class="block">Client Type @if (checkSettings('btrc_report_field_required') == 'enable')
                                    *
                                @endif
                            </label>
                            <select name="customer_type" id="" class="form-control select2"
                                @if (checkSettings('btrc_report_field_required') == 'enable') required @endif>
                                <option value="">Select One</option>
                                <option value="Home">Home</option>
                                <option value="Corporate">Corporate</option>
                            </select>
                            @error('customer_type')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @endif

                    {{-- @if (checkSettings('single_client_billing_type') == 'enable')
                        <div class="form-group col-sm-3 d-none" id="billing_type_section">
                            <label for="billing_type">Billing Type</label>
                            <select name="billing_type" id="billing_type" class="form-control select2">
                                <option value="">Select Billing Type</option>
                                <option value="monthly" {{ old('billing_type', getBillingType()) == 'monthly' ? 'selected' : '' }}>Monthly Bill Generate</option>
                                <option value="day_to_day" {{ old('billing_type', getBillingType()) == 'day_to_day' ? 'selected' : '' }}>Day to Day</option>
                            </select>
                        </div>
                    @endif --}}

                </div>

                <div class="bg-primary">
                    <h4 style="text-align: center;">Basic Information</h4>
                </div>
                <div class="row">

                    <div class="form-group col-sm-3">
                        <label for="client_name" class="block ">
                            Client Name*
                        </label>

                        <input type="text" name="client_name" id="client_name" value="{{ old('client_name') }}"
                            class="form-control " placeholder="Client Name" required>

                        @error('client_name')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror

                    </div>

                    @can('join-date-modify')
                        @if (showFormField('join_date'))
                            <div class="form-group col-sm-3">
                                <label for="joinDate" class="block ">
                                    Joining Date
                                </label>
                                <div class="input-group date" id="searchFrom2" data-target-input="nearest">
                                    <input type="text" placeholder="Joining Date" name="joinDate"
                                        value="{{ today()->format('m/d/Y') }}"
                                        class="form-control datetimepicker-input input-group-append" data-toggle="datetimepicker"
                                        data-target="#searchFrom2" autocomplete="off">

                                </div>
                                @error('joinDate')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    @endcan

                    @if (showFormField('occupation'))
                        <div class="form-group col-sm-3">
                            <label for="occupation" class="block ">
                                Occupation
                            </label>

                            <input type="text" name="occupation" id="occupation" value="{{ old('occupation') }}"
                                class="form-control " placeholder="Occupation">
                            @error('occupation')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    @if (showFormField('company_name'))
                        <div class="form-group col-sm-3">
                            <label for="company_name" class="block ">
                                Company Name
                            </label>

                            <input type="text" name="company_name" id="company_name" value="{{ old('company_name') }}"
                                class="form-control " placeholder="Company Name">
                            @error('company_name')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    @if (showFormField('designation'))
                        <div class="form-group col-sm-3">
                            <label for="designation" class="block ">
                                Designation
                            </label>

                            <input type="text" name="designation" id="designation" value="{{ old('designation') }}"
                                class="form-control " placeholder="Designation">
                            @error('designation')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    @if (showFormField('dob'))
                        <div class="form-group col-sm-3">
                            <label for="password" class="block ">
                                Client Date of Birth {{ checkRequired('dob', '*') }}
                            </label>

                            <div class="input-group date" id="searchFrom" data-target-input="nearest">
                                <input type="text" placeholder="Date of Birth" name="dob"
                                    class="form-control datetimepicker-input input-group-append" data-toggle="datetimepicker"
                                    data-target="#searchFrom" autocomplete="off" {{ checkRequired('dob', 'required') }}>

                            </div>

                            @error('dob')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif





                    @if (showFormField('father_name'))
                        <div class="form-group col-sm-3">
                            <label for="father_name" class="block ">
                                Father Name {{ checkRequired('father-name-required', '*') }}
                            </label>

                            <input type="text" name="father_name" id="father_name" value="{{ old('father_name') }}"
                                class="form-control " placeholder="Father Name"
                                {{ checkRequired('father-name-required', 'required') }}>
                            @error('father_name')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    @if (showFormField('mother_name'))
                        <div class="form-group col-sm-3">
                            <label for="mother_name" class="block ">
                                Mother Name {{ checkRequired('mother-name-required', '*') }}
                            </label>

                            <input type="text" name="mother_name" id="mother_name" value="{{ old('mother_name') }}"
                                class="form-control " placeholder="Mother Name"
                                {{ checkRequired('mother-name-required', '*') }}>
                            @error('mother_name')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif
                    @if (showFormField('national_id'))
                        <div class="form-group col-sm-3">
                            <label for="national_id" class="block pt-2">
                                National ID {{ checkRequired('national_id', '*') }}
                            </label>
                            <input type="text" name="national_id" id="national_id" value="{{ old('national_id') }}"
                                {{ checkRequired('national_id', 'required') }} class="form-control"
                                placeholder="National ID">
                            @error('national_id')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @endif
                    @if (checkSettings('national_id_picture') == 'enable')
                        @if (showFormField('nid_image'))
                            <div class="form-group col-sm-3">
                                <label for="nid_image" class="block pt-2">
                                    National ID Image {{ checkRequired('national_id_picture', '*') }}
                                </label>
                                <input type="file" name="nid_image" id="nid_image" accept="image/*"
                                    {{ checkRequired('national_id_picture', 'required') }} class="form-control-file">
                                @error('nid_image')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    @endif
                    @if (showFormField('passport_no'))
                        <div class="form-group col-sm-3">
                            <label for="passport_no" class="block pt-2">
                                Passport No
                            </label>

                            <input type="text" name="passport_no" id="passport_no" value="{{ old('passport_no') }}"
                                class="form-control " placeholder="Passport No">
                            @error('passport_no')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif

                    <div class="form-group col-sm-3">
                        <label for="contact_no" class="block pt-2">
                            Contact No.*
                        </label>

                        <input type="text" name="contact_no" id="contact_no" value="{{ old('contact_no') }}"
                            @if (checkSettings('contact_no') == 'enable') required @endif class="form-control "
                            placeholder="Contact No">
                        @error('contact_no')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror

                    </div>
                    @if (showFormField('other_contact'))
                        <div class="form-group col-sm-3">
                            <label for="contact_no" class="block pt-2">
                                Other Contact No
                            </label>

                            <input type="text" name="other_contact" id="other_contact"
                                value="{{ old('other_contact') }}" class="form-control " placeholder="Other Contact No">
                            @error('other_contact')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror

                        </div>
                    @endif



                    @if (showFormField('email'))
                        <div class="form-group col-sm-3">
                            <label class="block pt-2">
                                Email
                            </label>

                            <input type="text" class="form-control" placeholder="email" value=""
                                data-role="tagsinput" id="tags" name="email">

                        </div>
                    @endif
                </div>

                @if (showFormGroup('Address'))
                    <div class="bg-primary">
                        <h4 style="text-align: center;">Address</h4>
                    </div>
                    <div class="row">

                        @if (showFormField('division'))
                            <div class="col-sm-3">
                                <label for="division" class="block pt-2">
                                    Division {{ checkSettings('Division') == 'enable' ? '*' : '' }}
                                </label>
                                <select name="division" id="division_id" class="form-control select2"
                                    {{ checkSettings('Division') == 'enable' ? 'required' : '' }}>
                                    <option value="">Select One</option>
                                    @forelse ($division as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @empty
                                        <option value="">No Division Found</option>
                                    @endforelse
                                </select>
                            </div>
                        @endif
                        @if (showFormField('district'))
                            <div class="col-sm-3">
                                <label for="district" class="block pt-2">
                                    District {{ checkSettings('District') == 'enable' ? '*' : '' }}
                                </label>
                                <select name="district" id="district_id" class="form-control select2"
                                    {{ checkSettings('District') == 'enable' ? 'required' : '' }}>
                                    <option value="">Select One</option>

                                </select>
                            </div>
                        @endif
                        @if (showFormField('upazila'))
                            <div class="col-sm-2" id="upazilaDiv">
                                <label for="upazila" class="block pt-2">
                                    Upazila {{ checkSettings('Upazila') == 'enable' ? '*' : '' }}
                                </label>
                                <select name="upazila" id="upazila_id" class="form-control select2"
                                    {{ checkSettings('Upazila') == 'enable' ? 'required' : '' }}>
                                    <option value="">Select One</option>

                                </select>
                            </div>
                        @endif
                        @if (showFormField('upazila'))
                            <div class="col-sm-1 mt-2">
                                <label for="thana" class="block justify-content-center">Upazila</label>
                                @can('add-upazila')
                                    <button id="modal-open-button" type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#modal-upazila">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                @endcan
                            </div>
                        @endif

                        @if (showFormField('thana'))
                            <div class="col-sm-2" id="thanaDiv">
                                <label for="thana" class="block pt-2">
                                    Thana {{ checkSettings('Thana') == 'enable' ? '*' : '' }}
                                </label>
                                <select name="thana" id="thana_id" class="form-control select2"
                                    {{ checkSettings('Thana') == 'enable' ? 'required' : '' }}>
                                    <option value="">Select One</option>

                                </select>
                            </div>
                        @endif
                        @if (showFormField('thana'))
                            <div class="col-sm-1 mt-2">
                                <label for="thana" class="block justify-content-center">Thana</label>
                                @can('add-thana')
                                    <button id="modal-open-button" type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#modal-thana">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                @endcan
                            </div>
                        @endif



                        @if (showFormField('area'))
                            @if (checkSettings('area-dropdown') == 'enable')
                                <div class="form-group col-sm-3">
                                    <label for="area" class="block pt-2">
                                        Area/Union Parishad @if (checkSettings('area') == 'enable')
                                            *
                                        @endif
                                    </label>
                                    <select class="form-control select2" name="area" id="area"
                                        @if (checkSettings('area') == 'enable') required @endif>
                                        <option value="">Select Area</option>
                                    </select>
                                </div>
                            @else
                                <div class="col-sm-3">
                                    <label for="area" class="block pt-2">
                                        Area/Union Parishad @if (checkSettings('area') == 'enable')
                                            *
                                        @endif
                                    </label>
                                    <select name="area_select" id="area_select" class="form-control select2">
                                        <option value="">Select Area</option>
                                        @foreach ($areas as $area)
                                            <option value="{{ $area }}">{{ $area }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <label for="area" class="block pt-2">
                                    </label>
                                    <input type="text" name="area" id="area" value="{{ old('area') }}"
                                        class="form-control mt-3" @if (checkSettings('area') == 'enable') required @endif
                                        placeholder="Area">
                                </div>
                            @endif
                            @error('area')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        @endif

                        @if (showFormField('block_sector'))
                            <div class="form-group col-sm-3">
                                <label for="block_sector" class="block pt-2">
                                    Block/Sector/Post Office
                                </label>
                                <input type="text" name="block_sector" id="block_sector" value="{{ old('block_sector') }}"
                                    class="form-control " placeholder="Block/Sector">
                                @error('block_sector')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('road_name'))
                            <div class="form-group col-sm-3">
                                <label for="road_name" class="block pt-2">
                                    Road Name/Village
                                </label>
                                <input type="text" name="road_name" id="road_name" value="{{ old('road_name') }}"
                                    class="form-control " placeholder="Road Name">
                                @error('road_name')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('road_no'))
                            <div class="form-group col-sm-3">
                                <label for="road_no" class="block pt-2">
                                    Road No/Ward No
                                </label>
                                <input type="text" name="road_no" id="road_no" value="{{ old('road_no') }}"
                                    class="form-control " placeholder="Road No">
                                @error('road_no')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('building_name'))
                            <div class="form-group col-sm-3">
                                <label for="building_name" class="block pt-2">
                                    Building Name{{ checkRequired('bulling_name', '*') }}
                                </label>
                                <input type="text" name="building_name" id="building_name"
                                    value="{{ old('building_name') }}" class="form-control " placeholder="Building Name"
                                    {{ checkRequired('bulling_name', 'required') }}>
                                @error('building_name')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('building_no'))
                            <div class="form-group col-sm-3">
                                <label for="password" class="block pt-2">
                                    Building No
                                </label>
                                <input type="text" name="building_no" id="building_no" value="{{ old('building_no') }}"
                                    class="form-control " placeholder="Building No">
                                @error('building_no')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('flat_no'))
                            <div class="form-group col-sm-3">
                                <label for="flat_no" class="block pt-2">
                                    Flat/Level No
                                </label>
                                <input type="text" name="flat_no" id="flat_no" value="{{ old('flat_no') }}"
                                    class="form-control " placeholder="Flat No">
                                @error('flat_no')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif

                        @if (checkSettings('box') == 'disable')
                            @if (showFormField('box'))
                                <div class="col-sm-3">
                                    <label for="area" class="block pt-2">
                                        Box
                                    </label>
                                    @if (checkSettings('select_option_for_box_and_ponsetting') == 'enable')
                                        <select name="map_box_id" id="map_box_id" class="form-control select2">
                                            <option value="">Select Box</option>
                                            @foreach ($tjBoxes as $tjBox)
                                                <option value="{{ $tjBox->id }}"
                                                    {{ old('map_box_id') == $tjBox->id ? 'selected' : '' }}>
                                                    {{ $tjBox->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="text" name="box" id="box" value="{{ old('box') }}"
                                            class="form-control " placeholder="box">
                                    @endif
                                </div>
                            @endif
                        @endif

                        @if (checkSettings('box') == 'enable')
                            @if (showFormField('box'))
                                <div class="col-sm-3">
                                    <label class="block pt-2">
                                        Box ID
                                    </label>
                                    <select name="box_id" id="box_id" class="form-control">

                                    </select>
                                </div>
                            @endif
                        @endif


                        @if (globalPermission('manage-map'))
                            @if (showFormField('map_box'))
                                <div class="col-sm-3">
                                    <label for="map_box_id" class="block pt-2">
                                        Map Box
                                    </label>
                                    <select name="map_box_id" id="map_box" class="form-control select2">

                                    </select>
                                </div>
                            @endif
                        @endif

                        @if (showFormField('latitude'))
                            <div class="col-sm-3">
                                <label for="latitude" class="block pt-2">
                                    Latitude
                                </label>
                                <input type="text" name="client_latitude" id="client_latitude"
                                    value="{{ old('client_latitude') }}" class="form-control " placeholder="latitude">
                            </div>
                        @endif
                        @if (showFormField('longitude'))
                            <div class="col-sm-3">
                                <label for="longitude" class="block pt-2">
                                    Longitude
                                </label>
                                <input type="text" name="client_longitude" id="client_longitude"
                                    value="{{ old('client_longitude') }}" class="form-control " placeholder="longitude">
                            </div>
                        @endif

                        @if (checksettings('networkdiagram') == 'enable')
                            @canany(['diagram-box-index', 'diagram-box-create', 'diagram-box-edit'])
                                @if (showFormField('diagram_box'))
                                    <div class="form-group col-sm-3">
                                        <label for="diagram_box_id" class="block pt-2">
                                            Network Diagram Box
                                        </label>
                                        <select name="diagram_box_id" id="diagram_box_id" class="form-control select2">
                                            <option value="">Select Box</option>
                                            @foreach ($diagram_boxes as $diagram_box)
                                                <option value="{{ $diagram_box->id }}"
                                                    {{ old('diagram_box_id') == $diagram_box->id ? 'selected' : '' }}>
                                                    {{ $diagram_box->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('diagram_box_id')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif
                            @endcanany
                        @endif
                    </div>
                @endif

                @if (showFormGroup('Building Owner Contact'))
                    <div class="bg-primary mt-2">
                        <h4 class="text-center">Building Owner Contact</h4>
                    </div>
                    <div class="row">
                        @if (showFormField('owner_name'))
                            <div class="form-group col-sm-3">
                                <label for="owner_name" class="block pt-2">
                                    House Owner Name
                                </label>
                                <input type="text" name="owner_name" id="owner_name" value="{{ old('owner_name') }}"
                                    class="form-control " placeholder="Owner Name">
                                @error('owner_name')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif

                        @if (showFormField('owner_contact'))
                            <div class="form-group col-sm-3">
                                <label for="owner_contact" class="block pt-2">
                                    Owner Contact
                                </label>
                                <input type="text" name="onwer_number" id="onwer_number" value="{{ old('onwer_number') }}"
                                    class="form-control " placeholder="Owner Contact">
                                @error('onwer_number')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    </div>
                @endif

                @if (showFormGroup('Connection Information'))
                    <div class="bg-primary mt-2">
                        <h4 style="text-align: center;">Connection Information</h4>
                    </div>
                    <div class="row" id="connection_info">

                        @if (showFormField('cable_type'))
                            <div class="form-group col-sm-2">
                                <label for="passport_no" class="block pt-2">
                                    Cable type{{ checkRequired('cable_meter_required', '*') }}
                                </label>
                                <select name="cable_type" id="cable_type" class="form-control"
                                    {{ checkRequired('cable_meter_required', 'required') }}>
                                    <option value="">Select Cable Core Type</option>
                                    <option value="fiber_optic_2_core">Fiber Optic 2 Core</option>
                                    <option value="fiber_optic_4_core">Fiber Optic 4 Core</option>
                                    <option value="fiber_optic_6_core">Fiber Optic 6 Core</option>
                                    <option value="fiber_optic_8_core">Fiber Optic 8 Core</option>
                                    <option value="fiber_optic_12_core">Fiber Optic 12 Core</option>
                                    <option value="fiber_optic_24_core">Fiber Optic 24 Core</option>
                                </select>
                            </div>
                        @endif

                        @if (showFormField('cable_from'))
                            <div class="form-group col-sm-1">
                                <label for="from_cable" class="block pt-2">
                                    From:{{ checkRequired('cable_meter_from', '*') }}
                                </label>
                                <input type="number" min="0" name="from_cable" id="from_cable"
                                    value="{{ old('from_cable') }}" class="form-control " placeholder="Start Number"
                                    {{ checkRequired('cable_meter_from', 'required') }}>
                            </div>
                        @endif
                        @if (showFormField('cable_to'))
                            <div class="form-group col-sm-1">
                                <label for="to_cable" class="block pt-2">
                                    To:{{ checkRequired('cable_meter_to', '*') }}
                                </label>
                                <input type="number" min="0" name="to_cable" id="to_cable"
                                    value="{{ old('to_cable') }}" class="form-control " placeholder="End Number"
                                    {{ checkRequired('cable_meter_to', 'required') }}>
                            </div>
                        @endif

                        @if (showFormField('cable_from_2'))
                            <div class="form-group col-sm-1">
                                <label for="from_cable2" class="block pt-2">
                                    From(2nd):
                                </label>
                                <input type="number" min="0" name="from_cable2" id="from_cable2"
                                    value="{{ old('from_cable2') }}" class="form-control " placeholder="Start Number">
                            </div>
                        @endif
                        @if (showFormField('cable_to_2'))
                            <div class="form-group col-sm-1">
                                <label for="to_cable2" class="block pt-2">
                                    To(2nd):
                                </label>
                                <input type="number" min="0" name="to_cable2" id="to_cable2"
                                    value="{{ old('to_cable2') }}" class="form-control " placeholder="End Number">
                            </div>
                        @endif

                        @if (showFormField('total_cable'))
                            <div class="form-group col-sm-2">
                                <label for="total" class="block pt-2">Total Cable(Meter)</label>
                                <input type="text" name="required_cable" disabled value="0" id="total_cable_meter"
                                    class="form-control">
                            </div>
                        @endif

                        @if (showFormField('cable_id'))
                            <div class="form-group col-sm-2">
                                {{-- cable id --}}
                                <label for="cable_id" class="block pt-2">
                                    Cable ID{{ checkRequired('cable_id_required', '*') }}
                                </label>
                                <input type="text" name="cable_id" id="cable_id" value="{{ old('cable_id') }}"
                                    {{ checkRequired('cable_id', 'required') }} class="form-control " placeholder="Cable ID"
                                    {{ checkRequired('cable_id_required', 'required') }}>
                                @error('cable_id')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror

                            </div>
                        @endif

                        @if (showFormField('cat_type'))
                            <div class="form-group col-sm-2">
                                <label for="cat_type" class="block pt-2">
                                    Cable(CAT-5/CAT-6){{ checkRequired('cable_cat5_cat6_required', '*') }}
                                </label>
                                <select name="cat_type" id="cat_type" class="form-control select2"
                                    {{ checkRequired('cable_cat5_cat6_required', 'required') }}>
                                    <option value="">Select Cable Type</option>
                                    <option value="cat5">Cat 5</option>
                                    <option value="cat6">Cat 6</option>
                                </select>
                            </div>
                        @endif
                        @if (showFormField('cat_length'))
                            <div class="form-group col-sm-2">
                                <label for="cat_length" class="block pt-2">
                                    Cable(CAT-5/CAT-6) Meter {{ checkRequired('cable_cat5_cat6_required', '*') }}
                                </label>
                                <input type="number" min="0" name="cat_length" id="cat_length"
                                    value="{{ old('cat_length') }}" class="form-control " placeholder="Cable Meter"
                                    {{ checkRequired('cable_cat5_cat6_required', 'required') }}>
                                @error('cat_length')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif



                        @if (checkSettings('olt-pon') == 'enable')
                            @if (showFormField('onu_serial'))
                                <div class="form-group col-sm-3">
                                    <label for="onu_serial" class="block pt-2">
                                        ONU MAC/Pon No/Serial No {{ checkRequired('onu_serial_required', '*') }}
                                    </label>
                                    @if (checkSettings('select_option_for_box_and_ponsetting') == 'enable')
                                        <select name="onu_serial" id="onu_serial" class="form-control select2"
                                            {{ checkRequired('onu_serial_required', 'required') }}>
                                            <option value="">Select ONU MAC/Pon No/Serial No</option>
                                            @foreach ($pons as $pon)
                                                <option value="{{ $pon->id }}"
                                                    {{ old('onu_serial') == $pon->name ? 'selected' : '' }}>
                                                    {{ $pon->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="text" name="onu_serial" id="onu_serial"
                                            value="{{ old('onu_serial') }}" class="form-control "
                                            placeholder="ONU MAC/Serial No"
                                            {{ checkRequired('onu_serial_required', 'required') }}>
                                    @endif
                                    @error('onu_serial')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif


                            @if (showFormField('olt_no'))
                                <div class="form-group col-sm-3">
                                    <label for="olt_pon" class="block pt-2">
                                        OLT no {{ checkRequired('olt_no_require', '*') }}
                                    </label>
                                    <input type="text" name="olt_pon" id="olt_pon" value="{{ old('olt_pon') }}"
                                        class="form-control " placeholder="OLT No"
                                        {{ checkRequired('olt_no_require', 'required') }}>
                                    @error('olt_pon')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif

                            @if (showFormField('olt_card_slot'))
                                <div class="form-group col-sm-3">
                                    <label for="olt_no" class="block pt-2">
                                        OLT Card Slot Number {{ checkRequired('olt_port_number_required', '*') }}
                                    </label>
                                    <input type="text" name="olt_no" id="olt_no" value="{{ old('olt_no') }}"
                                        class="form-control " placeholder="OLT Card Slot number"
                                        {{ checkRequired('olt_port_number_required', 'required') }}>
                                    @error('olt_no')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif

                            @if (showFormField('pon_port'))
                                <div class="form-group col-sm-3">
                                    <label for="pon_port" class="block pt-2">
                                        PON Module Port No {{ checkRequired('pon_module_required', '*') }}
                                    </label>
                                    <input type="text" name="pon_port" id="pon_port" value="{{ old('pon_port') }}"
                                        class="form-control " placeholder="PON Module Port No"
                                        {{ checkRequired('pon_module_required', 'required') }}>
                                    @error('pon_port')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                        @endif

                        @can('customer-marketed-by')
                            @if (showFormField('marketed_by'))
                                <div class="form-group col-sm-3">

                                    <label for="marketed_by" class="block pt-2">
                                        Marketed By {{ checkRequired('marketed_by_required', '*') }}
                                    </label>
                                    <div class="row">

                                        <div class="col-sm-8" id="marketedDiv">
                                            <select name="marketed_by" id="marketed_by" class="form-control select2"
                                                {{ checkRequired('marketed_by_required', 'required') }}>
                                                <option value="">Select Marketer</option>
                                                @foreach ($marketer as $m)
                                                    <option value="{{ $m->id }}">{{ $m->firstname }}
                                                        {{ $m->lastname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @can('add-marketer')
                                            @if (showFormField('add_marketer'))
                                                <div class="col-sm-4">
                                                    <button type="button" class="btn btn-default" data-toggle="modal"
                                                        data-target="#modal-default">
                                                        <i class="fa fa-plus"></i> Marketer
                                                    </button>
                                                </div>
                                            @endif
                                        @endcan
                                        <div class="text-center" id="modalAlert"></div>
                                        @error('marketed_by')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>



                                </div>
                            @endif
                        @endcan
                        @if (checkSettings('source_name') == 'enable')
                            @if (showFormField('source_name'))
                                <div class="form-group col-sm-3">
                                    <label for="marketed_by" class="block pt-2">
                                        Source Name
                                    </label>
                                    <div class="" id="">
                                        <select name="source_name" id="source_name" class="form-control select2" required>
                                            <option value="">Select One</option>
                                            @forelse ($client_source as $source)
                                                <option value="{{ $source->id }}">{{ $source->name }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                    @error('source_name')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif


                            <div class="form-group col-md-3 d-none" id="client_id_div">
                                <label for="client_id" class="form-label block pt-2">Client <span
                                        class="text-danger">*</span></label>
                                <select name="client_id" id="client_id"
                                    class="form-control select2 @error('client_id') is-invalid @enderror">
                                    <option value="">Search and select client...</option>
                                    @if (old('client_id'))
                                        <option value="{{ old('client_id') }}" selected> {{ old('client_name') }}</option>
                                    @endif
                                </select>
                                @error('client_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @can('select-recommender')
                            @if (showFormField('recommender'))
                                <div class="form-group col-sm-3">
                                    <label for="recommender_id" class="block pt-2">Recommender</label>
                                    <select name="recommender_id" id="recommender_id" class="form-control select2">
                                        <option value="">— Select Recommender —</option>
                                        @foreach ($recommenders as $rec)
                                            <option value="{{ $rec->id }}"
                                                {{ old('recommender_id') == $rec->id ? 'selected' : '' }}>
                                                {{ $rec->name ?: 'N/A' }} - {{ $rec->phone }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('recommender_id')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                        @endcan
                        @if (showFormField('otc'))
                            <div class="form-group col-sm-3" id="otc_section" style="display: block">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <label for="otc" class="block pt-2">
                                            Customer OTC {{ checkRequired('customer_otc_required', '*') }}
                                        </label>

                                        <input type="number" name="otc" id="otc" value="{{ old('otc') ?? '0' }}"
                                            class="form-control " placeholder="Customer OTC"
                                            {{ checkRequired('customer_otc_required', 'required') }}>
                                        @error('otc')
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (checkSettings('free_client') == 'enable')
                            @can('add-free-client')
                                @if (showFormField('free_client'))
                                    <div class="form-group col-sm-3">
                                        <label for="billing_cycle" class="block pt-2">
                                            Free Client
                                        </label>
                                        <select name="is_free" id="is_free" class="form-control" required>
                                            <option selected value="0">No</option>
                                            <option value="1">Yes</option>
                                        </select>
                                    </div>
                                @endif
                            @endcan
                        @endif

                        @if (showFormField('remote_access'))
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block pt-2">
                                    Remote Access
                                </label>
                                <select name="remote_access" id="remote_access" class="form-control" required>
                                    <option value="No" {{ old('remote_access') == 'No' ? 'selected' : '' }}>No</option>
                                    <option value="Yes" {{ old('remote_access') == 'Yes' ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                        @endif
                        @if (showFormField('remote_access_username'))
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block pt-2">
                                    Remote Access Username
                                </label>
                                <input type="text" name="remote_access_username" id="remote_access_username"
                                    class="form-control" placeholder="Remote Access Username"
                                    value="{{ old('remote_access_username') }}">
                                @error('remote_access_username')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('remote_access_password'))
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block pt-2">
                                    Remote Access Password
                                </label>
                                <input type="text" name="remote_access_password" id="remote_access_password"
                                    class="form-control" placeholder="Remote Access Password"
                                    value="{{ old('remote_access_password') }}">
                                @error('remote_access_password')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        @if (showFormField('remote_access_port'))
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block pt-2">
                                    Remote Access Port
                                </label>
                                <input type="text" name="remote_access_port" id="remote_access_port" class="form-control"
                                    placeholder="Remote Access Port" value="{{ old('remote_access_port') }}">
                                @error('remote_access_port')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif

                        @if (globalPermission('manage-line-man'))
                            @if (showFormField('line_man'))
                                <div class="form-group col-sm-3">
                                    <label for="billing_cycle" class="block pt-2">
                                        Line Man *
                                    </label>
                                    <select name="line_man_id" id="line_man_id" class="form-control select2" required>
                                        <option value="">Select Line Man</option>
                                        @forelse ($line_mans as $line_man)
                                            <option value="{{ $line_man->id }}">{{ $line_man->name }}</option>
                                        @empty
                                            <option value="">No Line Man Found</option>
                                        @endforelse
                                    </select>
                                    @error('line_man_id')
                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                        @endif

                    </div>
                @endif
                @if (checkSettings('setClientPaymentAmountToClient') == 'enable')
                    @if (showFormField('client_payment_amount'))
                        <div class="form-group col-md-4" id="clientPaymentContainer" style="display: none">
                            <label for="pool_name" class="block text-sm font-medium text-gray-700">
                                Client payment amount
                            </label>
                            <input type="number" name="client_payment_amount" id="client_payment_amount"
                                class="focus:ring-indigo-500 focus:border-indigo-500 form-control"
                                placeholder=" Client payment amount" value="{{ old('client_payment_amount') }}"
                                autocomplete="off">
                            @error('client_payment_amount')
                                <div class="alert alert-danger">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    @endif
                @endif


                <hr>
                @if (showFormField('remarks'))
                    <div class="form-group col-sm-12">
                        <label for="contact_no" class="block pt-2">
                            Mikrotik Commnent
                        </label>
                        <textarea name="remarks" id="remarks" class="form-control">{{ old('remarks') }}</textarea>
                        @error('remarks')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror

                    </div>
                @endif

                <div class="form-group col-sm-4 float-right">
                    <button type="submit" id="BtnSaveForm" class="mt-5 btn btn-primary float-right">
                        Save
                    </button>
                </div>

                {{-- </div> --}}
            </div>

        </div>
    </form>


    <div class="modal fade" id="areaModal">
        <div class="modal-dialog">
            <form action="#" id="areaModalForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">

                            <input type="text" id="areaname" name="areaname" class="form-control"
                                placeholder="Area Name">
                        </div>



                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="button" id="areaSave">Save</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </form>
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <form action="#" id="modalForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">

                            <input type="text" id="mfname" name="mfname" class="form-control"
                                placeholder="First Name">
                        </div>
                        <div class="form-group">
                            <input type="text" id="mlname" name="mlname" class="form-control"
                                placeholder="Last Name">

                        </div>
                        <div class="form-group">
                            <input type="text" id="marketercontact" name="contact_no" class="form-control"
                                placeholder="Marketer Contact No">

                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="button" id="modalSave">Save</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </form>
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">Select Client Location</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="map" style="height:500px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="save-location-btn">Save Location</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-upazila">
        <div class="modal-dialog">
            <form action="#" id="modalUpazilaForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="">District*</label>
                            <select name="upazila_district_id" id="upazila_district_id" class="form-control select2">
                                <option value="">Select District</option>
                                @forelse ($district as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }} - {{ $item->bn_name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" id="upazila_nama" name="upazila_nama" class="form-control"
                                placeholder="English Name">
                        </div>
                        <div class="form-group">
                            <input type="text" id="upazila_bn_name" name="upazila_bn_name" class="form-control"
                                placeholder="Bengali Name">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="button" id="upazilamodalSave">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modal-thana">
        <div class="modal-dialog">
            <form action="#" id="modalThanaForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="">Upazila*</label>
                            <select name="thana_upazila_id" id="thana_upazila_id" class="form-control select2">
                                <option value="">Select Upazila</option>
                                @forelse ($upazila as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }} - {{ $item->bn_name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" id="thana_nama" name="thana_name" class="form-control"
                                placeholder="English Name">
                        </div>
                        <div class="form-group">
                            <input type="text" id="thana_bn_name" name="thana_bn_name" class="form-control"
                                placeholder="Bengali Name">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="button" id="thanamodalSave">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('taginput/bootstrap-tagsinput.js') }}"></script>
@endpush

@section('ajax')
    <script type="text/javascript">
        $(function() {

            $('#isStaticIpOk').on('click', function() {
                $('#static_ip').val('');
                $('#static_ip').toggle();
            });
            $('#enable_customer_id').on('click', function() {
                $('#customer_id').val('');
                $('#customer_id').toggle();
            });


            $('#modalSave').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('addMarketer') }}',
                    data: $('#modalForm').serialize(),
                    success: function(data) {
                        console.log(data);
                        if (data != 'error') {
                            $('#marketedDiv').html(data);
                            $('#modal-default').trigger('click');
                            $('#modalForm')[0].reset();
                        }
                    }
                });
            });

            $('#upazilamodalSave').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('addUpazila') }}',
                    data: $('#modalUpazilaForm').serialize(),
                    success: function(data) {
                        // console.log(data);
                        if (data != 'error') {
                            $('#upazilaDiv').html(data);
                            $('#modal-upazila').trigger('click');
                            $('#modalUpazilaForm')[0].reset();
                        }
                    }
                });
            });

            $('#thanamodalSave').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('addThana') }}',
                    data: $('#modalThanaForm').serialize(),
                    success: function(data) {
                        // console.log(data);
                        if (data != 'error') {
                            $('#thanaDiv').html(data);
                            $('#modal-thana').trigger('click');
                            $('#modalThanaForm')[0].reset();
                        }
                    }
                });
            });

            $("#modal-open-button").on("click", () => {
                $("#thana_upazila_id").val('').trigger('change');
            })

            $('#package_id').on('change', function() {
                let package_id = $(this).val();
                let pop_id = $('#pop_id').val();
                $.ajax({
                    type: 'get',
                    url: '{{ route('getPackageIpRange') }}',
                    data: {
                        package_id: package_id,
                        pop_id: pop_id
                    },
                    success: function(data) {
                        $('#static_ip').html(
                            '<option selected value="">Select Static Ip</option>' +
                            data
                        );
                        // console.log(data);
                    }
                });
            });

            $('#port').on('change', function() {
                let pop = $('#pop_id').val();
                let id = $(this).val();
                $.ajax({
                    type: 'get',
                    url: '{{ route('getStaticIpRange') }}',
                    data: {
                        id: id,
                        pop: pop
                    },
                    success: function(data) {
                        $('#static_ip').html(
                            '<option selected value="">Select Static Ip</option>' +
                            data
                        );
                    }
                });
            });





            var macAddress = $("#mac");

            macAddress.on("keyup", formatMAC);


            $('#pop_id').on('change', function() {

                let billgenerate = $('#pop_id :selected').data('billgenerate');
                var profilePictureEnabled =
                    "{{ checkSettings('file_up_for_own_other') == 'enable' ? 'true' : 'false' }}";

                if (billgenerate == 'yes') {
                    $('#bill_payment_status').show();
                    $('#otc_section').show();
                    $('#customer_id').show();
                    $('#connection_info').show();
                    $('#file_info').show();
                    $('#clientPaymentContainer').hide();
                    $('#billing_type_section').removeClass('d-none');
                } else {
                    $('#billing_type_section').addClass('d-none');
                    if (profilePictureEnabled === 'true') {
                        $('#file_info').show();
                    } else if (profilePictureEnabled === 'false') {
                        $('#file_info').hide();
                        $('#profilePicture').prop('required', false);
                        $('#picture').prop('required', false);
                        $('#client_door').prop('required', false);
                    }
                    $('#clientPaymentContainer').show();
                    $('#not_paid').prop("checked", true);
                    $('#bill_payment_status').hide();
                    $('#otc_section').hide();
                    $('#customer_id').hide();
                    $('#cable_type').prop('required', false);
                    $('#required_cable').prop('required', false);
                    $('#cat_type').prop('required', false);
                    $('#cat_length').prop('required', false);
                    $('#olt_pon').prop('required', false);
                    $('#olt_no').prop('required', false);
                    $('#pon_port').prop('required', false);
                    $('#onu_serial').prop('required', false);
                }

                $.ajax({
                    type: 'get',
                    url: '{{ route('getPackageForPop') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(data) {
                        $('#package_id option').remove();
                        $('#package_id').append(data);
                    }
                });




                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerArea') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        console.log(result);
                        $('#area').html(result);
                    }
                });

                $.ajax({
                    type: 'get',
                    url: '{{ route('getStaticIp') }}',
                    data: {
                        pop_id: $(this).val()
                    },
                    success: function(data) {
                        console.log(data);
                        $('#port').html(
                            '<option selected value="">Select Static Ip</option>' +
                            data
                        );
                        // console.log(data);
                    }
                });

                $.ajax({
                    type: 'get',
                    url: '{{ route('getBox') }}',
                    data: {
                        pop_id: $(this).val()
                    },
                    success: function(data) {
                        $('#box_id').html(
                            '<option selected value="">Select Box</option>' +
                            data
                        );
                        // console.log(data);
                    }
                });

                // The manager's fixed day, for the day-to-day case where the operator
                // does not choose one. Left as the fallback when the manager has none.
                @if (globalPermission('fixed_billing_cycle_of_d2d_manager') && getBillingType() == 'day_to_day' && !auth()->user()->can('day-to-day-reseller-full-date'))
                    $.ajax({
                        type: 'get',
                        url: '{{ route('getFixedBillingCycleByPopId') }}',
                        data: {
                            pop_id: $(this).val()
                        },
                        success: function(res) {
                            var select = $('#billing_cycle');

                            var days = (res && res.data && Array.isArray(res.data.days)) ?
                                res.data.days : [];

                            select.empty();

                            if (days.length === 0) {
                                // Manager pins nothing: back to the single today or
                                // yesterday value this field showed before.
                                var fallback = select.data('fallback');
                                select.append(`<option value="${fallback}">${fallback}</option>`);
                            } else if (days.length === 1) {
                                // One day is not a choice, so do not present it as one.
                                select.append(`<option value="${days[0]}">${days[0]}</option>`);
                            } else {
                                select.append('<option value="">Select Billing Cycle</option>');
                                for (const day of days) {
                                    select.append(`<option value="${day}">${day}</option>`);
                                }
                            }

                            select.trigger('change');
                        },
                        error: function() {
                            // Leave whatever is already there rather than blanking a
                            // required field on a failed lookup.
                        }
                    });
                @endif

                // kalam
                // if separate_billing_cycle_to_resellers is enable then get the billing cycles from the reseller and set it to billing cycle
                @if (checkSettings('separate_billing_cycle_to_resellers') == 'enable')
                    $.ajax({
                        type: 'get',
                        url: '{{ route('getBillingCyclesByPopId') }}',
                        data: {
                            pop_id: $(this).val()
                        },
                        success: function(data) {
                            $('#billing_cycle').empty();
                            $('#billing_cycle').append(
                                '<option value="">Select Billing Cycle</option>');

                            if (data && data.status === 'success' && Array.isArray(data.data)) {
                                for (const cycle of data.data) {
                                    $('#billing_cycle').append(
                                        `<option value="${cycle.value}">${cycle.label}</option>`
                                        );
                                }
                            }
                        },
                        error: function() {
                            $('#billing_cycle').empty();
                            $('#billing_cycle').append(
                                '<option value="">Select Billing Cycle</option>');
                        }
                    });
                @endif

            });

            $('#billing_cycle').on('change', function() {
                checkExpire();
            });
            $('#package_id').on('change', function() {
                checkExpire();
            });

            $('#free_day_to_create_customer').on('keyup', function() {
                checkExpire();
            });

            $('#cable_type').on('change', function() {
                let cat_type = $('#cat_type');
                let cat_length = $('#cat_length');
                cat_type.prop("required", false);
                cat_length.prop("required", false);
            });

            $('#cat_type').on('change', function() {
                let cat_length = $('#cat_length');
                cat_length.prop("required", true);
                let cable_type = $('#cable_type');
                cable_type.prop("required", false);
            });

            $('#from_cable').on('change', function() {
                var from_cable = $('#from_cable').val();
                var to_cable = $('#to_cable').val();
                calculateCableMeter(from_cable, to_cable);
            });

            $('#to_cable').on('change', function() {
                var from_cable = $('#from_cable').val();
                var to_cable = $('#to_cable').val();
                calculateCableMeter(from_cable, to_cable);
            });

            $('#from_cable2').on('keyup', function() {
                var from_cable2 = $('#from_cable2').val();
                var to_cable2 = $('#to_cable2').val();
                calculateCableMeter2(from_cable2, to_cable2);
            });

            $('#to_cable2').on('keyup', function() {
                var from_cable2 = $('#from_cable2').val();
                var to_cable2 = $('#to_cable2').val();
                calculateCableMeter2(from_cable2, to_cable2);
            });

            var difference1 = 0;
            var difference2 = 0;

            function calculateCableMeter($start, $end) {
                difference1 = Math.abs($start - $end);
                $('#total_cable_meter').val(difference1 + difference2);
            }

            function calculateCableMeter2($start, $end) {
                difference2 = Math.abs($start - $end);

                $('#total_cable_meter').val(difference1 + difference2);
            }



            function checkExpire() {

                var pop = $('#pop_id').val();
                var package = $('#package_id').val();
                var billing_cycle = $('#billing_cycle').val();
                let free_day_to_create_customer = $('#free_day_to_create_customer').val();



                if (package > 0 && billing_cycle > 0) {
                    $.ajax({
                        type: 'get',
                        url: '{{ route('expireCheck') }}',
                        data: {
                            pop: pop,
                            package: package,
                            billing_cycle: billing_cycle,
                            free_day_to_create_customer: free_day_to_create_customer
                        },
                        success: function(data) {

                            if (data.subReseller == 'no') {

                                var msg = "<p class='font-bold'><span class='text-blue-600'>" + data
                                    .exp_date + "</span> " +
                                    "for <span class='text-green-600'>" + data.total_date + "</span> " +
                                    "days will Cost BDT <span class='text-red-600'>" + data.cost +
                                    "</span> <span class='resellerBalance'>. Your Current Balance BDT " +
                                    data.curBalance + "</span></p>";

                            } else if (data.subReseller == 'yes') {

                                var msg = "<p class='font-bold'><span class='text-blue-600'>" + data
                                    .exp_date + "</span> " +
                                    "for <span class='text-green-600'>" + data.total_date + "</span> " +
                                    "days will Cost BDT <span class='text-red-600'>" + data
                                    .subResellerCost +
                                    "</span> <span class='resellerBalance'>. Your Current Balance BDT " +
                                    data.subResellerBalance + "(S)</span></p>";
                            }



                            $('#cost_message').html(msg);


                        }
                    });
                }
            }

            $('#userid').on('change', function() {

                $.ajax({
                    type: 'get',
                    url: '{{ route('checkUsername') }}',
                    data: {
                        username: $(this).val()
                    },
                    success: function(data) {

                        if (data != true) {
                            $('#BtnSaveForm').hide();
                            $('#userid').css('border', '1px solid red');
                            $('#useridWarning').html(
                                '<span style="color:red">Not Available</span>');
                        } else {
                            $('#BtnSaveForm').show();
                            $('#userid').css('border', '1px solid #ddd');
                            $('#useridWarning').html(
                                '<span style="color:green">Available</span>');
                        }

                    }
                });
            });



            $('#customer_code').on('change', function() {
                $.ajax({
                    type: 'get',
                    url: '{{ route('checkCustomerCode') }}',
                    data: {
                        customerCode: $(this).val()
                    },
                    success: function(data) {
                        if (data != true) {
                            $('#BtnSaveForm').hide();
                            $('#customer_code').css('border', '1px solid red');
                            $('#customerCodeWarning').html(
                                '<span style="color:red">Not Available</span>');
                        } else {
                            $('#BtnSaveForm').show();
                            $('#customer_code').css('border', '1px solid #ddd');
                            $('#customerCodeWarning').html(
                                '<span style="color:green">Available</span>');
                        }
                    }
                });
            });



        });

        $('#area_select').on('change', function() {
            var area = $('#area_select').val();
            $('#area').val(area);
        });



        function formatMAC(e) {
            var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
                str = e.target.value.replace(/[^a-f0-9]/ig, "");

            while (r.test(str)) {
                str = str.replace(r, '$1' + ':' + '$2');
            }

            e.target.value = str.slice(0, 17);
        };
    </script>

    <script>
        $('document').ready(function() {

            $('#division_id').change(function() {
                var id = $('#division_id').val();
                $.ajax({
                    url: '{{ route('fetchDistrict') }}',
                    type: 'get',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#district_id').html(data);
                    }
                });
            });

            $('#district_id').change(function() {
                var id = $('#district_id').val();
                $.ajax({
                    url: '{{ route('fetchUpazila') }}',
                    type: 'get',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(data) {
                        // console.log(data);
                        $('#upazila_id').html(data);
                    }
                });
            });

            $('#upazila_id').change(function() {
                var id = $('#upazila_id').val();
                $.ajax({
                    url: '{{ route('fetchThana') }}',
                    type: 'get',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(data) {
                        // console.log(data);
                        $('#thana_id').html(data);
                    }
                });
            });

        });
    </script>

    <script>
        $("document").ready(() => {
            $("#static").change(function() {
                $("#selectInterface").toggleClass("d-none");
                $("#username").toggleClass("d-none");
                $("#passwordElement").toggleClass("d-none");

                if ($(this).is(':checked')) {
                    $("#isStaticIpOk").prop("checked", true);
                    $("#static_ip").addClass("d-block");
                } else {
                    $("#isStaticIpOk").prop("checked", false);
                    $("#static_ip").removeClass("d-block");
                    $("#static_ip").addClass("d-none");
                }
            });
        });
    </script>


    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('MIX_MAP_API_KEY') }}&libraries=maps,marker&v=beta"
        defer></script>
    <script type="module">
        $('document').ready(function() {
            $.ajax({
                url: '{{ route('boxes.index') }}',
                type: 'get',
                success: function(data) {
                    $('#map_box').html(
                        `<option value="">Select Box</option>` +
                        data.map(item =>
                            `<option value="${item.id}">${item.id}.${item.name}</option>`
                        ).join(
                            '')
                    );
                }
            });

            let map;
            let boxMarkar;
            let clientMarkar;

            $('#map_box').on('change', async function() {
                const boxId = $(this).val();

                const box = await fetch(`{{ route('boxes.coordinates', '') }}/${boxId}`);
                const boxCordinate = await box.json();
                const latLong = JSON.parse(boxCordinate.coordinates);


                async function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                        center: latLong,
                        zoom: 17,
                        mapId: "select_location_client"
                    });

                    boxMarkar = new google.maps.Marker({
                        map,
                        position: latLong,
                        icon: "/images/box.png",
                    });

                    google.maps.event.addListener(map, 'click', function(event) {
                        placeMarker(event.latLng);
                    });

                    function placeMarker(location) {
                        if (clientMarkar) {
                            clientMarkar.setPosition(location);
                        } else {
                            clientMarkar = new google.maps.Marker({
                                position: location,
                                map: map
                            });
                        }
                    }
                    $("#mapModal").modal('show');
                }

                initMap();

            });

            $('#save-location-btn').on('click', function() {
                if (clientMarkar) {
                    console.log(clientMarkar)
                    const lat = clientMarkar.getPosition().lat();
                    const lng = clientMarkar.getPosition().lng();
                    $('#client_latitude').val(lat);
                    $('#client_longitude').val(lng);

                }

                $("#mapModal").modal('hide');
                map = null;
                boxMarkar = null;
                clientMarkar = null;
            });

            $('#source_name').on('change', function() {
                // selected source name value

                var selectedValueText = $('#source_name option:selected').text();

                // remove space from both sides of selectedValueText
                selectedValueText = selectedValueText.trimLeft().trimRight();
                console.log(selectedValueText);


                if (selectedValueText == 'Existing Client Reference') {
                    $('#client_id_div').removeClass('d-none');
                } else {
                    $('#client_id_div').addClass('d-none').val('');
                }
            });

            var clientSelect2RequestId = 0;
            $('#client_id').select2({
                placeholder: 'Search and select client...',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: '{{ route('get-clients') }}',
                    dataType: 'json',
                    delay: 500,
                    transport: function(params, success, failure) {
                        var thisRequestId = ++clientSelect2RequestId;
                        $.ajax({
                            url: params.url,
                            data: params.data,
                            type: 'GET',
                            dataType: 'json'
                        }).then(function(data) {
                            if (thisRequestId === clientSelect2RequestId) {
                                success(data);
                            }
                        }).fail(failure);
                    },
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.results,
                            pagination: {
                                more: data.pagination.more
                            }
                        };
                    },
                    cache: true
                },
                minimumInputLength: 2,
                templateResult: function(client) {
                    if (client.loading) {
                        return client.text;
                    }
                    return $('<div>' + client.text + '</div>');
                },
                templateSelection: function(client) {
                    return client.text;
                }
            });
        })
    </script>
@endsection