@extends('backend.layouts_backend.master2')

@section('title')
    Edit Point Of Sale Record
@endsection

@section('extra_styles')
    <style>
        .sticky-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #f8f9fa;
            /* Light background */
            /* padding: 10px; */
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        /* right aligned modal */
        /* Default: Right-aligned modal with animation */
        .modal.modal-right .modal-dialog {
            position: fixed;
            right: 0;
            top: 0;
            height: 100%;
            margin: 0;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }

        /* When modal is shown, slide in from the right */
        .modal.modal-right.show .modal-dialog {
            transform: translateX(0);
        }

        /* Mobile View (max-width: 576px) - Full width */
        @media (max-width: 576px) {
            .modal.modal-right .modal-dialog {
                width: 100%;
                /* Full width on mobile */
            }
        }

        /* Tablet View (between 577px and 991px) - 60% width */
        @media (min-width: 577px) and (max-width: 991px) {
            .modal.modal-right .modal-dialog {
                width: 60%;
                /* Moderate width for tablets */
            }
        }

        /* Desktop View (min-width: 992px) - 40% width */
        @media (min-width: 992px) {
            .modal.modal-right .modal-dialog {
                width: 40%;
                /* Adjusted width for large screens */
                max-width: 100%;
            }
        }

        /* end of right aligned modal */

        /* calculator */

        @import url("https://fonts.googleapis.com/css2?family=Bangers&family=Orbitron:wght@400;500;600;700;800;900&display=swap");


        #calculator {
            width: 350px;
            height: 500px;
            margin: 50px auto;
            background: #fefefe;
            background-image: linear-gradient(-300deg, #888, #fff);
            box-shadow: 0px 0px 4px #000;
            border-top-left-radius: 1em;
            border-top-right-radius: 1em;
            border-bottom-left-radius: 3em;
            border-bottom-right-radius: 3em;
        }

        .interface {
            background: #fefefe;
            background-image: linear-gradient(-300deg, #888, #fff);
            border-radius: 8px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            text-align: center;
            border: 3px solid #4d5368;
            border-bottom-left-radius: 3em;
            border-bottom-right-radius: 3em;
        }

        .title {
            padding-top: 20px;
            font-weight: semi-bold;
            font-size: 20px;
        }

        #results {
            padding: 5px 18px 5px 18px;
            margin: 20px auto;
            width: 82%;
            height: 60px;
            font-size: 34px;
            color: black;
            text-align: right;
            border: 3px double rgb(170, 170, 170);
            background-color: #d1e7da;
            border-radius: 2px;
            pointer-events: none;
        }

        .pads {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }

        .pads div {
            margin-bottom: 10px;
            height: 30px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }

        .keys-box {
            margin-top: 8px;
        }

        button:active {
            box-shadow: 0px 1px 1px grey;
        }

        input {
            cursor: pointer;
            font-family: "Bangers", cursive;
            font-family: "Orbitron", sans-serif;
            margin-bottom: 10px;
            color: black;
            font-size: 1.1em;
            cursor: pointer;
            margin: 2px 3px 10px 3px;
            width: 58px;
            height: 40px;
            border: 2px solid rgb(214, 214, 214);
            border-top-left-radius: 0.6em;
            border-top-right-radius: 0.6em;
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            background: #939ab4;
            transition: 0.1s;
        }

        input:active {
            border: 2px solid rgb(255, 255, 255);
        }

        .equal {
            width: 120px;
        }

        .delete,
        .clear {
            font-size: 16px;
            background: #939ab4;
            color: white;
            border: 2px solid white;
        }

        .delete:active,
        .clear:active {
            border: 2px solid rgb(214, 214, 214) !important;
        }



        /* end of calculator */
    </style>
@endsection

@section('content')
    {{-- header --}}
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0"> Edit Point Of Sale Record</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">

            @if (Auth::user()->can('client-create'))
                <a href="{{ route('clients.index') }}"><button type="button"
                        class="btn btn-primary btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                        Add Client
                    </button> </a>
            @endif

            @if (Auth::user()->can('product-create'))
                <a href="{{ route('products.create') }}"><button type="button"
                        class="btn btn-primary btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                        Add Product
                    </button> </a>
            @endif

            @if (Auth::user()->can('view-calculator'))
                <a href="javascript::void(0)"><button type="button" data-bs-toggle="modal" data-bs-target="#slideModal"
                        class="btn btn-primary btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                        Calculator
                    </button> </a>
            @endif

            @if (Auth::user()->can('sale-list'))
                <a href="{{ route('point_of_sale.index') }}"><button type="button"
                        class="btn btn-success btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="eye"></i>
                        All Pos Sales
                    </button> </a>
            @endif
        </div>
    </div>

    <div class="modal fade modal-right" id="slideModal" tabindex="-1" aria-labelledby="slideModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-end modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="slideModalLabel">QUICK CALCULATOR</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="padding:0px; background-color:#ffffff;">
                    <div id="calculator">
                        <div class="interface">
                            <div class="title">CALCULATOR</div>
                            <input type="text" id="results" disabled>

                            <div class="pads">
                                <div class="keys-box">
                                    <input type="button" value="7" class="key">
                                    <input type="button" value="8" class="key">
                                    <input type="button" value="9" class="key">
                                    <input type="button" value="DEL" class="delete">
                                    <input type="button" value="AC" class="clear">
                                </div>

                                <div class="keys-box">
                                    <input type="button" value="4" class="key">
                                    <input type="button" value="5" class="key">
                                    <input type="button" value="6" class="key">
                                    <input type="button" value="*" class="key">
                                    <input type="button" value="/" class="key">
                                </div>

                                <div class="keys-box">
                                    <input type="button" value="1" class="key">
                                    <input type="button" value="2" class="key">
                                    <input type="button" value="3" class="key">
                                    <input type="button" value="+" class="key">
                                    <input type="button" value="-" class="key">
                                </div>

                                <div class="keys-box">
                                    <input type="button" value="0" class="key">
                                    <input type="button" value="." class="key">
                                    <input type="button" value="%" class="key">
                                    <input class="equal" type="button" value="=">
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    {{-- end header --}}

    <div class="justify-content-center">
        @if (session('messagesave'))
            {{-- <div class="alert alert-success" > {{ session('message')}} </div> --}}
            <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show mb-3" role="alert">
                <i class="mdi mdi-check-all label-icon"></i>
                {{ session('messagesave') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <form method="POST" action="{{ route('point_of_sale.update', $point_of_sale->id) }}">
            <input type="hidden" name="point_of_sale_id" value="{{ $point_of_sale->id }}">
            @csrf
            @method('PATCH')

            <div class="row">
                {{-- products section  --}}
                <div class="col-12 col-md-9">
                    {{-- Products ordered --}}
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headerClientBookings">
                                <button class="accordion-button collapsed"
                                    style="background-color:#071d3e; color:#ffffff;" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseProductBookings"
                                    aria-expanded="false" aria-controls="collapseProductBookings">
                                    Add Products
                                </button>
                            </h2>
                            <div id="collapseProductBookings" class="accordion-collapse collapsee"
                                aria-labelledby="headerClientBookings" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="accordion-body">

                                        <div class="table-responsive">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th style="width:40%;" class="required">Product *</th>
                                                        <th style="width:20%;">Price</th>
                                                        <th style="width:10%;">Quantity</th>
                                                        <th style="width:20%;">Subtotal</th>
                                                        <th style="width:10%;">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="pos-table">

                                                    @foreach ($existing_products as $key => $existing_product)
                                                        <tr>
                                                            <td style="min-width: 250px;">
                                                                <select class="form-control product-select search_data "
                                                                    name="product_id[]" required>
                                                                    <option value="" data-price="0">Select Product
                                                                    </option>
                                                                    @foreach ($products as $product)
                                                                        <option value="{{ $product->id }}"
                                                                            data-price="{{ $product->product_selling_price }}"
                                                                            @selected($existing_product['product_id'] == $product->id ?? '')>
                                                                            {{ $product->product_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td style="min-width: 200px;"><input type="number"
                                                                    class="form-control product-price" name="price[]"
                                                                    value="{{ $existing_product['price'] ?? 0 }}"
                                                                    step="0.01">
                                                            </td>
                                                            <td style="min-width: 130px;"><input type="number"
                                                                    class="form-control product-qty" name="quantity[]"
                                                                    value="{{ $existing_product['quantity'] ?? 0 }}"
                                                                    min="1"></td>
                                                            <td style="min-width: 200px;"><input type="text"
                                                                    class="form-control product-subtotal"
                                                                    name="subtotal[]"
                                                                    value="{{ $existing_product['subtotal'] ?? 0 }}"
                                                                    readonly></td>
                                                            <td style="min-width: 100px;">
                                                                <button type="button" class="btn btn-danger remove-row"
                                                                    disabled>Remove</button>
                                                            </td>
                                                        </tr>
                                                    @endforeach


                                                </tbody>
                                            </table>
                                        </div> <br>

                                        <button type="button" class="btn btn-primary" id="add-row">Add
                                            Product</button>
                                        <div class="mt-3">
                                            {{-- hidden inputs --}}
                                            <input type="hidden" name="total_amount"
                                                value="{{ $point_of_sale->total_amount }}" id="total-amount-input">
                                            <input type="hidden" name="final_total"
                                                value="{{ $point_of_sale->final_total }}" id="final-total-input">
                                        </div> <br></br>





                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <br>
                    {{-- End of products ordered --}}

                    {{-- Sale details --}}
                    <div class="accordion" id="saleDetails">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="sale_additional_details">
                                <button class="accordion-button collapsed"
                                    style="background-color:#071d3e; color:#ffffff;" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapse_sale_details"
                                    aria-expanded="false" aria-controls="collapse_sale_details">
                                    Sale Details
                                </button>
                            </h2>
                            <div id="collapse_sale_details" class="accordion-collapse collapsee"
                                aria-labelledby="sale_additional_details" data-bs-parent="#saleDetails">
                                <div class="accordion-body">
                                    <div class="accordion-body">

                                        <div class="row">
                                            <div class="col-12 col-md text-center text-md-start">
                                                <label for="" class="form-label"> Client </label>
                                                <select class="form-control  search_data" name="client_id">
                                                    <option value="">Select Client
                                                    </option>
                                                    @foreach ($clients as $client)
                                                        <option value="{{ $client->id }}" @selected($client->id == $point_of_sale->client_id ?? '')>
                                                            {{ $client->first_name }} {{ $client->last_name }}
                                                            {{ $client->other_names }}
                                                        </option>
                                                    @endforeach
                                                </select> <br><br>

                                                {{--  validation --}}
                                                @if ($errors->has('client_id'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" class="feather feather-alert-circle">
                                                            <circle cx="12" cy="12" r="10"></circle>
                                                            <line x1="12" y1="8" x2="12"
                                                                y2="12">
                                                            </line>
                                                            <line x1="12" y1="16" x2="12.01"
                                                                y2="16">
                                                            </line>
                                                        </svg>
                                                        {{ $errors->first('client_id') }}
                                                    </div>
                                                @endif

                                            </div>
                                            <div class="col-12 col-md text-center text-md-start">
                                                <label for="" class="form-label"> Sale Date </label>
                                                <input type="date" class="form-control" name="sale_date"
                                                    value="{{ $point_of_sale->sale_date ?? '' }}">
                                            </div>

                                        </div><br>

                                        <div class="row">
                                            {{-- branch --}}
                                            <div class="col-12 col-md text-center text-md-start">
                                                <label for="" class="form-label"> Branch </label>
                                                <select class="form-control  search_data" name="branch_id">
                                                    <option value="">Select Branch
                                                    </option>
                                                    @foreach ($branches as $branch)
                                                        <option value="{{ $branch->id }}" @selected($point_of_sale->branch_id == $branch->id ?? '')>
                                                            {{ $branch->branch_name }}
                                                    @endforeach
                                                </select> <br><br>

                                                {{--  validation --}}
                                                @if ($errors->has('branch_id'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" class="feather feather-alert-circle">
                                                            <circle cx="12" cy="12" r="10"></circle>
                                                            <line x1="12" y1="8" x2="12"
                                                                y2="12">
                                                            </line>
                                                            <line x1="12" y1="16" x2="12.01"
                                                                y2="16">
                                                            </line>
                                                        </svg>
                                                        {{ $errors->first('branch_id') }}
                                                    </div>
                                                @endif

                                            </div>

                                            <div class="col-12 col-md">
                                                <label for="" class="form-label">Payment Method </label>
                                                <select name="payment_method" id=""
                                                    class="form-select search_data">
                                                    <option value=""> -- Select --</option>
                                                    <option value="1" @selected($point_of_sale->payment_method == 1 ?? '')> Cash
                                                    </option>
                                                    <option value="2" @selected($point_of_sale->payment_method == 2 ?? '')> Mobile
                                                        Money
                                                    </option>
                                                    <option value="3" @selected($point_of_sale->payment_method == 3 ?? '')> Bank Transfer
                                                    </option>
                                                </select>

                                                {{--  validation --}}
                                                @if ($errors->has('payment_method'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" class="feather feather-alert-circle">
                                                            <circle cx="12" cy="12" r="10"></circle>
                                                            <line x1="12" y1="8" x2="12"
                                                                y2="12"></line>
                                                            <line x1="12" y1="16" x2="12.01"
                                                                y2="16"></line>
                                                        </svg>
                                                        {{ $errors->first('payment_method') }}
                                                    </div>
                                                @endif

                                            </div>


                                        </div> <br>

                                        {{-- note --}}

                                        @if (is_sale_notes_enabled_on_pos())
                                            <label for="" class="form-label"> Sale Note </label>
                                            <textarea name="sale_notes" rows="3" placeholder="Enter sale  notes" class="form-control">{{ $point_of_sale->sale_notes ?? '' }}</textarea>
                                            <br>
                                        @endif


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <br>

                    {{-- end sale details --}}





                    @if (is_booking_enabled_on_pos())
                        {{-- additional booking details --}}
                        <div class="accordion" id="product_booking_details">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="add_product_bookings">
                                    <button class="accordion-button collapsed"
                                        style="background-color:#071d3e; color:#ffffff;" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#collapse_product_bookings"
                                        aria-expanded="false" aria-controls="collapse_product_bookings">
                                        Additional Booking Details
                                    </button>
                                </h2>
                                <div id="collapse_product_bookings" class="accordion-collapse collapsee"
                                    aria-labelledby="add_product_bookings" data-bs-parent="#product_booking_details">
                                    <div class="accordion-body">
                                        <div class="accordion-body">


                                            <div class="row">
                                                <div class="col-12 col-md">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Booking Date </label>
                                                        <input type="date" name="booking_date" value=""
                                                            placeholder="Enter other names" class="form-control">
                                                    </div><br>

                                                    {{--  validation --}}
                                                    @if ($errors->has('booking_date'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-alert-circle">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="12"></line>
                                                                <line x1="12" y1="16" x2="12.01"
                                                                    y2="16"></line>
                                                            </svg>
                                                            {{ $errors->first('booking_date') }}
                                                        </div>
                                                    @endif

                                                </div>

                                                <div class="col-12 col-md">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Booking Time </label>
                                                        <input type="time" name="booking_time"
                                                            value="{{ $now_time }}" class="form-control">
                                                    </div><br>

                                                    {{--  validation --}}
                                                    @if ($errors->has('booking_time'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-alert-circle">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="12"></line>
                                                                <line x1="12" y1="16" x2="12.01"
                                                                    y2="16"></line>
                                                            </svg>
                                                            {{ $errors->first('booking_time') }}
                                                        </div>
                                                    @endif
                                                </div>


                                                <div class="col-12 col-md">
                                                    <label for="" class="form-label">Booking Status </label>
                                                    <select name="booking_status" id=""
                                                        class="form-select search_data">
                                                        <option value=""> -- Select --</option>
                                                        <option value="1" selected> Pending
                                                        </option>
                                                        <option value="2"> Processing
                                                        </option>

                                                        <option value="3"> Completed
                                                        </option>
                                                        <option value="4"> Cancelled
                                                        </option>

                                                    </select>

                                                    {{--  validation --}}
                                                    @if ($errors->has('booking_status'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-alert-circle">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="12"></line>
                                                                <line x1="12" y1="16" x2="12.01"
                                                                    y2="16"></line>
                                                            </svg>
                                                            {{ $errors->first('booking_status') }}
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>





                                            <div class="row">
                                                {{-- <div class="col-12 col-md">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Job Location </label>
                                                        <input type="text" name="job_location"
                                                            placeholder="Enter job location" class="form-control">
                                                    </div><br>

                                                    @if ($errors->has('job_location'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-alert-circle">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="12"></line>
                                                                <line x1="12" y1="16" x2="12.01"
                                                                    y2="16"></line>
                                                            </svg>
                                                            {{ $errors->first('job_location') }}
                                                        </div>
                                                    @endif
                                                </div> --}}

                                                <div class="col-md-12">
                                                    <label for="" class="form-label"> Booking Details </label>
                                                    <textarea name="booking_details" rows="3" class="form-control">{{ old('booking_details') }}</textarea>
                                                    <br>

                                                    {{--  validation --}}
                                                    @if ($errors->has('booking_details'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-alert-circle">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="12"></line>
                                                                <line x1="12" y1="16" x2="12.01"
                                                                    y2="16"></line>
                                                            </svg>
                                                            {{ $errors->first('booking_details') }}
                                                        </div>
                                                    @endif

                                                </div>



                                            </div>



                                            {{-- End of products ordered --}}


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <br>
                        {{-- end of additional booking details --}}
                    @endif

                </div>

                {{-- end of products section  --}}


                {{-- calculations --}}
                <div class="col-12 col-md-3">


                    <div class="" style="padding:15px; background-color:#071d3e; color:white;">

                        <ul class="list-group">

                            <li class="list-group-item"> <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                Total Amount : UGX </li>
                            </li>
                            <li class="list-group-item">
                                <span id="total-amount">0.00</span>
                            </li>
                            </li>

                            <li class="list-group-item"> <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                Discount (%)

                            </li>

                            <li class="list-group-item"> <input type="number" id="discount" name="discount"
                                    class="form-control d-inline w-100" value="{{ $point_of_sale->discount ?? 0 }}"
                                    min="0" max="100" step="1">
                            </li>

                            <li class="list-group-item"> <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                Final Total: UGX

                            </li>

                            <li class="list-group-item"> <span id="final-total">0.00</span>
                            </li>

                            <li class="list-group-item"> <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                Amount Paid (UGX)
                            </li>

                            <li class="list-group-item"> <input type="number" name="amount_paid_by_client"
                                    placeholder="Enter Amount" value="{{ $point_of_sale->amount_paid_by_client ?? 0 }}"
                                    class="form-control d-inline w-100" min="0" step="1"
                                    style="border-left:3px solid red;" required>
                                {{--  validation --}}
                                @if ($errors->has('amount_paid_by_client'))
                                    <div class="alert alert-danger" role="alert">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-alert-circle">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="12" y1="8" x2="12" y2="12"></line>
                                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
                                        </svg>
                                        {{ $errors->first('amount_paid_by_client') }}
                                    </div>
                                @endif
                            </li>

                            <li class="list-group-item"> <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                Balance (UGX)
                            </li>

                            <li class="list-group-item"> <input type="number"
                                    value="{{ $point_of_sale->balance_due_to_client ?? 0 }}" name="balance_due_to_client"
                                    class="form-control d-inline w-100" value="0" min="0" step="1">
                            </li>
                        </ul>

                        {{-- row2 --}} <br>
                        <div class="row">
                            <div class="col-12 col-md text-center text-md-start">
                                <button type="submit" class="btn btn-success w-100" name="submit_btn"
                                    value="complete"><i class="btn-icon-prepend" data-feather="plus-circle"></i> Save
                                    Sale</button>

                            </div>
                        </div> <br>

                        @if (Auth::user()->can('sale-list'))
                        <div class="row">
                            <div class="col-12 col-md text-center text-md-start">
                                <button type="submit" class="btn btn-primary w-100" name="submit_btn"
                                    value="complete_and_print"><i class="btn-icon-prepend"
                                        data-feather="plus-circle"></i> Save & Print</button>
                            </div>
                        </div>
                        @endif

                    </div>
                </div>
                {{-- end of calculations --}}
            </div>







        </form>


    </div>
@endsection





@section('extra_scripts')
    {{-- handline select2  --}}
    <script>
        // all select2 ids
        $('.search_data,.add_more_select_ids').select2({
            width: '100%',
        });

        // make select2 better display in input fields //avoid overlap
        $('.select2-selection.select2-selection--single').css('height', 'calc(2.85rem)');
        $('.select2-selection.select2-selection--single').css('padding-top', '3px');
        $('.select2-selection__arrow').css('top', '10px');
    </script>


    {{-- point of sale product --}}
    <script>
        $(document).ready(function() {
            function updateSubtotals() {
                let total = 0;
                $("#pos-table tr").each(function() {
                    let price = parseFloat($(this).find(".product-price").val()) || 0;
                    let quantity = parseInt($(this).find(".product-qty").val()) || 1;
                    let subtotal = price * quantity;

                    $(this).find(".product-subtotal").val(subtotal.toFixed(2));
                    total += subtotal;
                });

                $("#total-amount").text(total.toFixed(2));
                updateFinalTotal();
            }

            function updateFinalTotal() {
                let total = parseFloat($("#total-amount").text()) || 0;
                let discount = parseFloat($("#discount").val()) || 0;

                discount = Math.min(Math.max(discount, 0), 100);
                let discountAmount = (total * discount) / 100;
                let finalTotal = total - discountAmount;

                $("#final-total").text(finalTotal.toFixed(2));
                $("#total-amount-input").val(total.toFixed(2));
                $("#final-total-input").val(finalTotal.toFixed(2));

                updateBalance(); // Ensure balance updates when final total changes
            }

            function updateBalance() {
                let finalTotal = parseFloat($("#final-total").text()) || 0;
                let amountPaid = parseFloat($("input[name='amount_paid_by_client']").val()) || 0;
                let balance = finalTotal - amountPaid;

                $("input[name='balance_due_to_client']").val(balance.toFixed(2));
            }

            // Listen for changes in amount paid by client
            $(document).on("input", "input[name='amount_paid_by_client']", function() {
                updateBalance();
            });

            // Listen for changes in discount
            $(document).on("input", "#discount", function() {
                updateFinalTotal();
            });

            // Listen for changes in quantity
            $(document).on("input", ".product-qty", function() {
                updateSubtotals();
            });

            // Update price when product is selected
            $(document).on("change", ".product-select", function() {
                let price = $(this).find(":selected").data("price");
                let row = $(this).closest("tr");
                row.find(".product-price").val(price);
                updateSubtotals();
            });

            $(document).on("input", ".product-price", function() {
                updateSubtotals();
            });

            // Add new row
            $("#add-row").click(function() {
                let newRow = `<tr>
            <td>
                <select class="form-control product-select search_data" name="product_id[]">
                    <option value="" data-price="0">Select Product</option>
                    @foreach ($products as $product)
                        <option value="{{ $product->id }}" data-price="{{ $product->product_selling_price }}">{{ $product->product_name }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" class="form-control product-price" name="price[]" value="0" step="0.01"></td>
            <td><input type="number" class="form-control product-qty" name="quantity[]" value="1" min="1"></td>
            <td><input type="text" class="form-control product-subtotal" name="subtotal[]" value="0" readonly></td>
            <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
        </tr>`;
                $("#pos-table").append(newRow);

                // Reinitialize select2 for new elements
                $(".product-select").select2();
            });

            // Remove row
            $(document).on("click", ".remove-row", function() {
                $(this).closest("tr").remove();
                updateSubtotals();
            });

            updateSubtotals();
        });
    </script>


    {{-- calculator  --}}
    <script>
        class Calculator {
            constructor() {
                this.area = $("#results");
                this.keys = $(".key");
                this.clear = $(".clear");
                this.equal = $(".equal");
                this.operation = $(".operation-btn");
                this.delete = $(".delete");
                this.compute();
            }

            compute() {
                this.keys.click((el) => {
                    let valor = $(el.target).val();
                    this.area.val(this.area.val() + valor);
                });

                this.clear.click(() => {
                    this.area.val("");
                });

                this.equal.click(() => {
                    this.area.val(eval(this.area.val()));
                });

                this.operation.click((el) => {
                    let valor = $(el.target).val();

                    switch (valor) {
                        case "logx":
                            this.area.val(Math.log(this.area.val()));
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/log
                            // La fonction Math.log() renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre
                            // Dans le cas le plus simple, le logarithme compte le nombre d'occurrences du même facteur dans une multiplication répétée : par exemple, comme 1000 = 10×10×10 = 103, le logarithme en base 10 de 1000 est 3.
                            break;

                        case "exponential":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/exp
                            // La fonction Math.exp() renvoie l'exponentielle d'un nombre
                            // En mathématiques, la fonction exponentielle est la fonction notée exp qui est égale à sa propre dérivée et prend la valeur 1 en 0.

                            this.area.val(Math.exp(this.area.val()));

                            break;

                        case "power2":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
                            // La fonction Math.pow() renvoie un nombre à une certaine puissance
                            // Par exemple 3 puissance 2 = 3 * 3 = 9.

                            this.area.val(Math.pow(this.area.val(), 2));

                            break;

                        case "power3":
                            // Par exemple : 3 puissance 3 = 3 * 3 * 3 = 27.

                            this.area.val(Math.pow(this.area.val(), 3));

                            break;

                        case "sqrt":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt
                            // La fonction Math.sqrt() renvoie la racine carrée d'un nombre
                            // Par exemple, pour 25 quelle est la racine carrée ?
                            // On cherche le nombre qui, multiplié par lui-même, donne le résultat 25
                            // la racine carrée de 25 est 5 (5 x 5 = 25)
                            // la racine carrée de 16 est 4 (4 x 4 = 16)
                            // La racine carrée de 81 est 9 (9 x 9 = 81)

                            this.area.val(Math.sqrt(this.area.val()));

                            break;

                        case "fact":
                            let x = this.area.val();

                            let y = 1;
                            for (var i = 1; i <= x; i++) {
                                y = y * i;
                            }

                            this.area.val(y);

                            break;

                        case "sin":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sin
                            // La fonction Math.sin() renvoie le sinus d'un nombre.
                            // En géométrie, le sinus d'un angle dans un triangle rectangle est le rapport entre la longueur du côté opposé à cet angle et la longueur de l'hypoténuse.

                            this.area.val(Math.sin(this.area.val()));

                            break;

                        case "asin":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/asin
                            // La fonction Math.asin() renvoie l'arc sinus d'un nombre (en radians).

                            this.area.val(Math.asin(this.area.val()));

                            break;

                        case "cos":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/cos
                            // La fonction Math.cos() retourne le cosinus d'un angle dont la valeur est exprimée en radians
                            this.area.val(Math.cos(this.area.val()));

                            break;

                        case "acos":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/acos
                            // La fonction Math.acos() renvoie l'arc cosinus d'une valeur exprimée en radians.
                            this.area.val(Math.acos(this.area.val()));

                            break;

                        case "tan":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/tan
                            // La fonction Math.tan() renvoie la tangente d'un nombre exprimant un angle en radians.

                            this.area.val(Math.tan(this.area.val()));

                            break;

                        case "atan":
                            // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/atan
                            // La fonction Math.atan() renvoie l'arc tangente d'un nombre exprimée en radians.

                            this.area.val(Math.atan(this.area.val()));

                            break;
                    }
                });

                this.delete.click(() => {
                    var deletion = this.area.val().length - 1;
                    var afterDeletion = this.area.val().substring(0, deletion);
                    this.area.val(afterDeletion);
                });
            }
        }

        // const calculator = new Calculator();
        new Calculator();
    </script>




    {{-- end of dynamic search javascript --}}
@endsection