@extends('layout')

@section('h4-page', __('Create Taxinvoice'))

@section('contents')
    <style>
        .table thead {
            color: #ffffff;
        }

        .table thead tr th {
            background: #ffffff;
        }

        .table-striped>tbody>tr:nth-of-type(odd)>* {
            --bs-table-bg-type: #F3F6FF;
        }

        .table tbody tr td {
            line-height: 30px;
            height: 30px;
        }

        .imgoverlap {
            width: 90px;
            height: 90px;
            object-fit: cover;
            position: absolute;
            top: 0px;
            left: 0px;
            background: transparent;
        }

        .img-1 {
            z-index: 10;
            opacity: 0.5;
            border-radius: 10px;
        }

        .img-2 {
            z-index: 20;
            top: -5px;
            left: -5px;
            opacity: 0.8;
            border-radius: 10px;
        }

        .img-3 {
            z-index: 30;
            top: -10px;
            left: -10px;
            border-radius: 10px;
        }

        .div-absolute-header {
            position: absolute;
            top: -40px;
        }

        .relativeImg {
            position: relative;
            height: 100px;
            top: 1rem;
        }

        /* modal image */

        .row>.column {
            padding: 0 8px;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .column {
            float: left;
            width: 25%;
        }

        /* The Modal (background) */
        .modal-data {
            display: none;
            position: fixed;
            z-index: 3000;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
            border: none;
        }

        /* Modal Content */
        .modal-data>.modal-content {
            position: relative;
            margin: auto;
            padding: 0;
            width: 90%;
            height: 70%;
            max-width: 1200px;
            border: none;
            background: transparent;
        }

        /* The Close Button */
        .close {
            color: white;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #999;
            text-decoration: none;
            cursor: pointer;
        }

        .mySlides {
            display: none;
        }

        .mySlides img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .mySlides2 {
            display: none;
        }

        .mySlides2 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .mySlides3 {
            display: none;
        }

        .mySlides3 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .cursor {
            cursor: pointer;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        img {
            margin-bottom: -4px;
        }

        .caption-container {
            text-align: center;
            background-color: black;
            padding: 2px 16px;
            color: transparent;
        }

        .demo {
            opacity: 0.6;
        }

        .active,
        .demo:hover {
            opacity: 1;
        }

        img.hover-shadow {
            transition: 0.3s;
        }

        .hover-shadow:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .modal-content {
            background: white;
        }

        .modal>.modal-content {
            background: white;
        }

        .footer-wrapper {
            margin-top: 70px;
        }

        .div-total {
            border-top: 1px solid #ECECEC;
        }

        .div-total-price {
            color: #58A21C;
            font-weight: 700;
        }

        p {
            font-size: 15px;
        }
        .form-label{
            font-weight: 700
        }
       


        /* end modal image */
    </style>
    <div class="row layout-top-spacing">
        <div class="col-12 mb-md-0 mb-4">
            <div>
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div>
                    <form action="{{ route('taxinvoice.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="text" name="ref_order_id" value="{{ @$main->id }}" class="d-none">
                        <input type="text" name="account_id" value="{{ @$main->account_id }}" class="d-none">
                        <input type="text" name="date" value="{{ date('Y-m-d', strtotime(@$main->date)) }}"
                            class="d-none">
                        <input type="text" name="store_service_id" value="{{ @$main->store_service_id }}" class="d-none">
                        <div class="row">
                            <div class="col-12 col-md-5">
                                <div class="card p-3 ">
                                    <ul class="list-group">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <div class="d-flex flex-wrap justify-content-between align-items-center">
                                                    <span class="fw-bold">{{ __('OrderNo') }} :
                                                        {{ @$main->no }}</span>
                                                    <p class="m-0 text-end">{{ date('d-m-Y', strtotime(@$main->date)) }}</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <p 
                                                    class="m-0 form-label required">{{ __('Document Language') }}</p>
                                            </div>
                                            <div class="d-flex mt-2">
                                                <div class="form-check mx-2">
                                                    <input class="form-check-input custom-radio" type="radio" name="language"
                                                        id="language1" value="th" checked>
                                                    <label class="form-check-label" for="language1">
                                                        {{ __('th') }}
                                                    </label>
                                                </div>
                                                <div class="form-check mx-2">
                                                    <input class="form-check-input custom-radio" type="radio" name="language"
                                                        id="language2" value="en">
                                                    <label class="form-check-label" for="language2">
                                                        {{ __('en') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="type"
                                                    class="form-label required">{{ __('Customer Information') }}</label>
                                                <select class="form-select" aria-label="Default select example"
                                                    id="type" name="type">
                                                    <option value="personal" selected>{{ __('Individual') }}</option>
                                                    <option value="company">{{ __('Company') }}</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none" id="div-is-company">
                                            <div class="form-group ps-0">
                                                <p 
                                                    class="m-0 form-label required">{{ __('Headoffice / Branch') }}</p>
                                            </div>
                                            <div class="d-flex mt-2">
                                                <div class="form-check mx-2">
                                                    <input class="form-check-input custom-radio" type="radio" name="is_headoffice"
                                                        id="is_headoffice1" value="1" checked>
                                                    <label class="form-check-label" for="is_headoffice1">
                                                        {{ __('Headoffice') }}
                                                    </label>
                                                </div>
                                                <div class="form-check mx-2">
                                                    <input class="form-check-input custom-radio" type="radio" name="is_headoffice"
                                                        id="is_headoffice2" value="0">
                                                    <label class="form-check-label" for="is_headoffice2">
                                                        {{ __('Branch') }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group ps-0 d-none" id="div-branch">
                                                <div>
                                                    <label for="branch"
                                                        class="form-label required">{{ __('Branch code') }}</label>
                                                    <input type="text" class="form-control" id="branch_code"
                                                        name="branch_code" placeholder="00001" maxlength="50">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                                <label for="vat_type"
                                                    class="form-label required">{{ __('Vat Type') }}</label>
                                                <select class="form-select" aria-label="Default select example"
                                                    id="vat_type" name="vat_type">
                                                    <option value="include" selected>{{ __('Include') }}</option>
                                                    <option value="exclude">{{ __('Exclude') }}</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="name"
                                                    class="form-label required">{{ __('Client Name') }}</label>
                                                <input type="text" class="form-control" id="name" name="name"
                                                    placeholder="{{ __('Client Name') }}" maxlength="255" required
                                                    value="{{ @$main->account?->fullname() }}">
                                            </div>
                                        </li>
                                        <div>
                                            <label for="address"
                                                class="form-label required">{{ __('Client Address') }}</label>
                                            <textarea class="form-control" id="address" name="address" rows="5" required
                                                onchange="onchangetextarea(this, 'address')">{{ @$main->account?->defaultAddress?->fullAddress() }}</textarea>
                                        </div>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="fname"
                                                    class="form-label required">{{ __('Tax ID') }}</label>
                                                <input type="text" class="form-control" id="tax_id" name="tax_id"
                                                    placeholder="12334567890123" maxlength="13" required>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="fname"
                                                    class="form-label required">{{ __('Tel') }}.</label>
                                                <input type="text" class="form-control" id="tel" name="tel"
                                                    placeholder="0812345678" maxlength="20" required
                                                    value="{{ @$main->account?->tel }}">
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="fname"
                                                    class="form-label required">{{ __('Email') }}</label>
                                                <input type="email" class="form-control" id="email" name="email"
                                                    placeholder="example@testing.com" maxlength="70" required
                                                    value="{{ @$main->account?->email }}">
                                            </div>
                                        </li>
                                        <div>
                                            <label for="address" class="form-label">{{ __('Note') }}</label>
                                            <textarea class="form-control" id="note" name="note" rows="5"
                                                onchange="onchangetextarea(this, 'note')"></textarea>
                                        </div>
                                        <div class="div-total mt-3 ">
                                            @php
                                                $option_shipping = json_decode(@$main->option_shipping);
                                                $option_shipping = @$option_shipping ? (float)$option_shipping[0]->price : 0;
                                                $total_service =
                                                    @$main->total_price -
                                                        @$option_shipping - 
                                                        @$main->shipping_price +
                                                        @$main->promotion_price ??
                                                    0;
                                                $total =
                                                    $total_service + @$main->shipping_price + @$option_shipping ??
                                                    0;
                                                $total_after_discount = $total - @$main->promotion_price ?? 0;
                                                $vat = ($total_after_discount * 7) / 107;
                                                $total_excluded_vat = $total_after_discount - $vat;
                                            @endphp
                                            <div class="d-flex justify-content-between pt-3">
                                                <p>{{ __('Total Price') }}</p>
                                                <p>{{ number_format(@$total_service, 2) }}
                                                </p>
                                                <input type="text" class="d-none" name="total"
                                                    value="{{ @$total_service }}">
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p class="">{{ __('Shipping Price') }}:</p>
                                                <p>{{ number_format(@$main->shipping_price ?? 0, 2) }}</p>
                                                <input type="text" class="d-none" name="shipping_price"
                                                    value="{{ @$main->shipping_price ?? 0 }}">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <p>{{ __('Urgent Cost') }}:</p>
                                                <p>{{ number_format($option_shipping, 2) }}
                                                </p>
                                                <input type="text" class="d-none" name="urgent_price"
                                                    value="{{ @$option_shipping }}">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <p>{{ __('Total') }}:</p>
                                                <p>{{ number_format($total, 2) }}</p>
                                            </div>
                                            <hr>
                                            <div class=" d-flex justify-content-between pt-2">
                                                <p class="w-75">{{ __('Discount') }}: @if($main->redeem_code_id) ( {{ $main->redeemCode->detail }} ) @endif </p>
                                                <p class="text-danger">- {{ number_format(@$main->promotion_price ?? 0, 2) }}</p>
                                                <input type="text" class="d-none" name="discount_price"
                                                    value="{{ @$main->promotion_price ?? 0 }}">
                                            </div>
                                            <div class=" d-flex justify-content-between ">
                                                <p>{{ __('After Discount') }}</p>
                                                <p>{{ number_format(@$total_after_discount ?? 0, 2) }}</p>
                                            </div>
                                            <hr>
                                            <div class=" d-flex justify-content-between">
                                                <p class="">{{ __('Total Price Not Include VAT') }}</p>
                                                <p>{{ number_format(@$total_excluded_vat ?? 0, 2) }}</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p class="">{{ __('VAT 7%') }}</p>
                                                <p>{{ number_format(@$vat ?? 0, 2) }}</p>
                                                <input type="text" class="d-none" name="vat_price"
                                                    value="{{ @$vat ?? 0 }}">
                                            </div>
                                            <hr>
                                            <div class="d-flex justify-content-between">
                                                <p class="div-total-price">{{ __('Grand total') }}:</p>
                                                <p class="div-total-price">
                                                    {{ number_format(@$total_after_discount ?? 0, 2) }}</p>
                                                <input type="text" class="d-none" name="grand_total"
                                                    value="{{ @$total_after_discount ?? 0 }}">
                                            </div>
                                        </div>

                                    </ul>
                                </div>
                                <div class="d-flex justify-content-between pt-3">
                                    <div>
                                        <button class="btn btn-success"
                                            type="submit">{{ __('Create Taxinvoice') }}</button>
                                        <a href="{{ url()->previous() }}"
                                            class="btn bg-gradient-success">{{ __('back') }}</a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-7">
                                <div class="table-responsive card ">
                                    <table class="table table-striped dataTable">
                                        <thead style="height: 60px;">
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('ProductName') }}</th>
                                                <th>{{ __('ServiceName') }}</th>
                                                <th>{{ __('qty') }}</th>
                                                <th>{{ __('price') }}</th>
                                                <th>{{ __('unit') }}</th>
                                                <th>{{ __('total') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @foreach (@$main->getDetails as $key => $item)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td>{{ $item->product?->name }}</td>
                                                    <td>{{ $item->service?->name }}</td>
                                                    <td>{{ $item->qty }}</td>
                                                    <td>{{ number_format($item->price ?? 0, 2) }}</td>
                                                    <td>{{ $item->units?->name }}</td>
                                                    <td>{{ number_format($item->qty * $item->price, 2) }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                            @for ($i = count(@$main->getDetails); $i <= 24; $i++)
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            @endfor
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div>

                    </form>
                </div>
                <div class="card mt-3 d-none">
                    <div class="card-header">
                        <h1>{{ __('History') }}</h1>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('historyOrder.store') }}" id="formHistory" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <ul class="list-group">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <input type="text" class="d-none" name="order_id"
                                                    value="{{ @$main->id }}">
                                                <label for="type_history">{{ __('HistoryType') }}</label>
                                                <select name="type_history" id="type_history" class="form-select"
                                                    aria-label="Default select example" onchange="showPayment()">
                                                    <option value="change_date">Change Date</option>
                                                    <option value="broken">Broken</option>
                                                    <option value="payment">Payment</option>
                                                    <option value="other">Other</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none" id="div-price">
                                            <div class="form-group ps-0">
                                                <label for="price">{{ __('price') }}</label>
                                                <input type="text" class="form-control" name="price"
                                                    id="price">
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="type_history">{{ __('Description') }}</label>
                                                <textarea class="form-control" name="comment_history" id="comment_history" cols="30" rows="10"></textarea>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <div class="text-center">
                                                    <p>{{ __('Image') }}</p>
                                                    <div class="d-flex justify-content-center mb-4">
                                                        <img id="selectedAvatar"
                                                            src="{{ asset('img/placeholder-avatar.png') }}"
                                                            class=""
                                                            style="width: 100%; height: 200px; object-fit: contain;"
                                                            alt="example placeholder" />
                                                    </div>
                                                    <div class="d-flex justify-content-center">
                                                        <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                                            <label class="form-label text-white m-1"
                                                                for="img">{{ __('ChooseFile') }}</label>
                                                            <input type="file" class="form-control d-none"
                                                                id="img"
                                                                onchange="displaySelectedImage(event, 'selectedAvatar')"
                                                                accept="image/*" name="img" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="btn btn-success" type="submit">{{ __('save') }}</button>
                        </form>
                        <div class="mt-3">
                            @foreach ($main->historyOrder ?? [] as $key => $item)
                                <div class="border border-primary rounded p-3 my-3">
                                    <p>{{ __('HistoryType') }} : {{ $item->type }} & {{ __('Date') }} :
                                        {{ $item->created_at }}</p>
                                    <p>{{ $item->comment }}</p>
                                    <p>{{ __('CreateBy') }} :{{ $item->createBy?->account()?->fullname() }}</p>
                                    <div>
                                        @foreach ($item->ImageHistory ?? [] as $key => $value)
                                            <img src="{{ $value->pathImage() }}" alt="img"
                                                style="width: 300px; height: 100%; object-fit: cover;">
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="for-toast" id="toast-container">
            {{-- <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"
                id="">

            </div> --}}
            {{-- <div>
                <div class="progress m-0">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                        aria-valuemax="100" style="width:0%; border-radius: 0;">
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
    <div id="myModal" class="modal-data">
        <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->getImageAccount as $key => $item)
                <div class="mySlides h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides')">&#10095;</a>


            {{-- <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/6704c2840a5e9_1728365188.png') }}"
                    style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
            </div>
            <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/66be2cc75cc73_1723739335.jpg') }}"
                    style="width:100%" onclick="currentSlide(2)" alt="Snow">
            </div>
            <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/6704c2840a5e9_1728365188.png') }}"
                    style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
            </div> --}}
        </div>
    </div>
    <div id="rider" class="modal-data">
        <span class="close cursor" onclick="closeModal('rider')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->attachmentOrderPickup ?? [] as $key => $item)
                <div class="mySlides2 h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides2')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides2')">&#10095;</a>
        </div>
    </div>
    <div id="riderSend" class="modal-data">
        <span class="close cursor" onclick="closeModal('riderSend')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->attachmentOrderShipping ?? [] as $key => $item)
                <div class="mySlides3 h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides3')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides3')">&#10095;</a>
        </div>
    </div>
    <div class="modal fade" id="generateModelData" tabindex="-1" aria-labelledby="generateModelDataLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>{{ __('GenerateRider') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="message-data"></p>
                    <input type="text" id="message-data-input" class="d-none">
                    <input type="text" id="message-data-rider" class="d-none">
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button type="button" class="btn btn-secondary" onclick="cliclCopy()">{{ __('Copy') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendSms()">{{ __('SendSms') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.getElementById('type').addEventListener('change', function() {
            var is_company = this.value == 'company' ? true : false;
            if(is_company){
                document.getElementById('div-is-company').classList.remove('d-none');
            } else {
                document.getElementById('div-is-company').classList.add('d-none');
                document.getElementById('div-branch').classList.add('d-none');
            }
        });
        document.getElementById('is_headoffice1').addEventListener('change', function() {
            var is_headoffice = this.checked;
            if (!is_headoffice) {
                document.getElementById('div-branch').classList.remove('d-none');
            } else {
                document.getElementById('div-branch').classList.add('d-none');
            }
        });
        document.getElementById('is_headoffice2').addEventListener('change', function() {
            var is_headoffice = this.checked;
            if (is_headoffice) {
                document.getElementById('div-branch').classList.remove('d-none');
            } else {
                document.getElementById('div-branch').classList.add('d-none');
            }
        });
        function setInputFilter(textbox, inputFilter, errMsg) {
            ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(
                function(event) {
                    textbox.addEventListener(event, function(e) {
                        if (inputFilter(this.value)) {
                            // Accepted value.
                            if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                                this.classList.remove("input-error");
                                this.setCustomValidity("");
                            }

                            this.oldValue = this.value;
                            this.oldSelectionStart = this.selectionStart;
                            this.oldSelectionEnd = this.selectionEnd;
                        } else if (this.hasOwnProperty("oldValue")) {
                            // Rejected value: restore the previous one.
                            this.classList.add("input-error");
                            this.setCustomValidity(errMsg);
                            this.reportValidity();
                            this.value = this.oldValue;
                            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                        } else {
                            // Rejected value: nothing to restore.
                            this.value = "";
                        }
                    });
                });
        }
        setInputFilter(document.getElementById("branch_code"), function(value) {
            return /^-?\d*$/.test(value);
        }, "{{ __("Must be an unsigned integer") }}");
        setInputFilter(document.getElementById("tax_id"), function(value) {
            return /^-?\d*$/.test(value);
        }, "{{ __("Must be an unsigned integer") }}");
        setInputFilter(document.getElementById("tel"), function(value) {
            return /^-?\d*$/.test(value);
        }, "{{ __("Must be an unsigned integer") }}");
    </script>
@endsection