@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')
                    <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>
                @endcan

                @if (checkSettings('profilePicture') == 'enable')
                    <div class="row" id="file_info" style="display: none">
                        <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>
                        <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>

                        <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>

                        <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>

                        <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>
                    </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')
                            <label class="block">
                                Ignore Mikrotik Check <input name="ignoreMkCheck" type="checkbox">
                            </label>
                        @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')
                        <div class="form-group col-sm-3">
                            <label for="password" class="block text-sm font-medium text-gray-700">
                                Customer Code @if (checkSettings('customer_code') == 'enable')
                                    *
                                @endif
                            </label>

                            <input type="text" name="customer_code" id="customer_code"
                                value="{{ old('customer_code') }}" class="form-control"
                                @if (checkSettings('customer_code') == 'enable') required @endif placeholder="customer code">
                            <div id="customerCodeWarning"></div>
                            @error('customer_code')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @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>

                    @if (getBillingType() == 'day_to_day')
                        <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>
                    @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

                    <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>

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

                            <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')
                        <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


                    <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>


                    <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>

                    @if (checkSettings('radius_customer_bandwidth_limit') == 'enable')
                        @can('apply-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>
                        @endcan
                    @endif

                    <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>
                    <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>
                    <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>

                </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')
                        <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>
                    @endcan

                    <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>





                    <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>

                    <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>
                    <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>

                    <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>

                    <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>
                    <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>



                    <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>
                </div>

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

                    <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>
                    <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>
                    <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>
                    <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>

                    <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>
                    <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>



                    @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

                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>

                    @if (checkSettings('box') == 'disable')
                        <div class="col-sm-3">
                            <label for="area" class="block pt-2">
                                Box
                            </label>
                            <input type="text" name="box" id="box" value="{{ old('box') }}"
                                class="form-control " placeholder="box">
                        </div>
                    @endif

                    @if (checkSettings('box') == 'enable')
                        <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


                    @if (globalPermission('manage-map'))
                        <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

                    <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>
                    <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>
                </div>

                <div class="bg-primary mt-2">
                    <h4 class="text-center">Building Owner Contact</h4>
                </div>
                <div class="row">
                    <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>

                    <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>
                </div>

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

                    <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>

                    <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>
                    <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>

                    <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>
                    <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>

                    <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>

                    <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>

                    <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>
                    <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>



                    @if (checkSettings('olt-pon') == 'enable')
                        <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>
                            <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') }}>
                            @error('onu_serial')
                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>


                        <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>

                        <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>

                        <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

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

                            <label for="marketed_by" class="block pt-2">
                                Marketed By
                            </label>
                            <div class="row">

                                <div class="col-sm-8" id="marketedDiv">
                                    <select name="marketed_by" id="marketed_by" class="form-control select2">
                                        <option value="">Select Marketer</option>
                                        @foreach ($marketer as $m)
                                            <option value="{{ $m->id }}">{{ $m->firstname }}
                                                {{ $m->lastname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @can('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>
                                @endcan
                                <div class="text-center" id="modalAlert"></div>
                                @error('marketed_by')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>



                        </div>
                    @endcan
                    @if (checkSettings('source_name') == 'enable')
                        <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-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
                                </label>

                                <input type="number" name="otc" id="otc" value="{{ old('otc') ?? '0' }}"
                                    class="form-control " placeholder="Customer OTC">
                                @error('otc')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    @if (checkSettings('free_client') == 'enable')
                        @can('free-client')
                            <div class="form-group col-sm-3">
                                <label for="billing_cycle" class="block ">
                                    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>
                        @endcan
                    @endif

                </div>
                @if (checkSettings('setClientPaymentAmountToClient') == 'enable')
                    <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
                <hr>
                <div class="form-group col-sm-12">
                    <label for="contact_no" class="block pt-2">
                        Remarks
                    </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>

                <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();
                } else {
                    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);
                    }
                })


            });

            $('#billing_cycle').on('change', function() {
                checkExpire();
            });
            $('#package_id').on('change', 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();



                if (package > 0 && billing_cycle > 0) {
                    $.ajax({
                        type: 'get',
                        url: '{{ route('expireCheck') }}',
                        data: {
                            pop: pop,
                            package: package,
                            billing_cycle: billing_cycle
                        },
                        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;
            });
        })
    </script>
@endsection