@extends('layouts.adminmaster')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/plugins/flatpickr/flatpickr.min.css') }}?v=1746412455">
    {{-- <!-- Choices Css -->
     <link rel="stylesheet" href="{{ asset('build/assets/plugins/choices.min.css') }}"> --}}

    <style>
        .file-upload-box {
            background-color: #f8f9fa;
            border: 2px dashed #ccc;
        }

        .file-upload-box:hover {
            background-color: #f1f1f1;
        }

        .image-preview {
            position: relative;
            display: inline-block;
        }

        #deleteImage {
            font-size: 1.2rem;
            line-height: 1;
        }

        #tax {
            border: none;
            background-color: transparent;
        }

        #tax:hover {
            border: 1px solid #e4e2e2;
        }

        .file-upload-box {
            width: auto !important;
            height: auto !important;
        }

        .image-preview:hover #deleteImage {
            display: block !important;
        }
        .price-input-group{
            min-width: 150px;
        }
    </style>
@endsection
@section('content')
    <!-- Page Header -->
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title"><span class="font-weight-normal text-muted ms-2">{{ lang('Custom Invoice Create') }}</span>
            </h4>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-1 -->
    <div class="row justify-content-center">
        <div class="col-xl-12">
            <form action="{{ url('admin/customInvoices/store') }}" id="createInvoiceForm" method="post"
                enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="totalFinalPrice" id="totalFinalPrice">
                <div class="card custom-card">

                    <div class="card-header border-0 d-md-flex d-block">
                        <div class="card-title fs-24">{{lang('Create Invoice')}}</div>
                        <!-- Company Logo Upload -->
                        <div class="form-group  ms-auto">
                            <div class="file-upload-box border rounded d-flex align-items-center justify-content-center mt-sm-0 mt-2"
                                style="height: 100px; width:50%; cursor: pointer; position: relative; overflow: hidden;">
                                <!-- File Input -->
                                <input type="file" name="invoiceLogo" id="invoiceLogo"
                                    accept="image/png, image/jpeg, image/jpg" class="file-input"
                                    style="position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer;">

                                <!-- Image Preview -->
                                <div class="image-preview position-relative text-center">
                                    <img id="logoPreview" src="" alt="Preview" class="img-fluid d-none"
                                        style="max-width: 10rem; height: auto; object-fit: contain;">

                                    <!-- Delete 'X' Button -->
                                    <button id="deleteImage" type="button"
                                        class="btn btn-sm btn-danger position-absolute d-none"
                                        style="top: 8px; right: 9px; z-index: 10;">&times;</button>
                                </div>

                                <!-- Placeholder -->
                                <div id="uploadPlaceholder" class="text-center p-3">
                                    <i class="ri-upload-cloud-2-line" style="font-size: 2rem; color: #6c757d;"></i>
                                    <p class="text-muted m-0">{{lang('Add Company Logo')}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <form action="{{ url('admin/customInvoices/store') }}" id="createInvoiceForm" method="post">
                    @csrf
                    <input type="hidden" name="totalFinalPrice" id="totalFinalPrice"> --}}
                    <div class="card-body pt-0">
                        <div class="p-5 border rounded">
                            <div class="row">
                                <div class="col-lg-6 border-end pe-5">
                                    <h5 class="mb-3 fw-bold">{{lang('Billing From')}}</h5>
                                    <div class="row">
                                        <!-- Company Name -->
                                        <div class="form-group col-6 errorSection">
                                            <label class="form-label">{{lang('Name')}}</label>
                                            <input name="companyName" type="text" class="form-control required"
                                                placeholder="Enter Company Name" value="{{ setting('companyName') }}">
                                            <span class="text-danger errors"></span>
                                        </div>

                                        <!-- Address Line 1 -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Street Address')}}</label>
                                            <input name="addressLine1" type="text" class="form-control"
                                                placeholder="Street Address" value="{{ setting('addressLine1') }}">
                                        </div>

                                        <!-- Address Line 2 -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Address Line 2')}}</label>
                                            <input name="addressLine2" type="text" class="form-control"
                                                placeholder="Address Line 2" value="{{ setting('addressLine2') }}">
                                        </div>

                                        <!-- City Name -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('City')}}</label>
                                            <input name="cityName" type="text" class="form-control"
                                                placeholder="Enter City Name" value="{{ setting('cityName') }}">
                                        </div>

                                        <!-- State Name -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('State')}}</label>
                                            <input name="stateName" type="text" class="form-control"
                                                placeholder="Enter State Name" value="{{ setting('stateName') }}">
                                        </div>

                                        <!-- Zip/Postal Code -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Zip/Postal Code')}}</label>
                                            <input name="zipPostalCode" type="text" class="form-control"
                                                placeholder="Enter Zip/Postal Code" value="{{ setting('zipPostalCode') }}">
                                        </div>

                                        <!-- Country -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Country')}}</label>
                                            <input name="countryName" type="text" class="form-control"
                                                placeholder="Enter Country Name" value="{{ setting('countryName') }}">
                                        </div>


                                        <!-- GST/VAT -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Tax Name')}}</label>
                                            <input name="taxName" type="text" class="form-control"
                                                placeholder="Enter GST / VAT" value="{{ setting('taxName') }}">
                                        </div>

                                        <!-- Tax ID -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Tax ID')}}</label>
                                            <input name="taxId" type="text" class="form-control"
                                                placeholder="Enter Tax ID" value="{{ setting('taxId') }}">
                                        </div>

                                    </div>
                                </div>

                                <div class = "col-lg-6 ps-5">
                                    <h5>{{lang('Billing To')}}</h5>

                                    <div class="row">
                                        <div class="form-group col-6 errorSection">
                                            @php

                                                $customers = \App\Models\Customer::where('status', '1')
                                                    ->where('verified', '1')
                                                    ->with([
                                                        'tickets' => function ($query) {
                                                            $query
                                                                ->whereIn('status', ['New', 'Inprogress']) // Filter tickets by status
                                                                ->doesntHave('invoice'); // Exclude tickets with an invoice
                                                        },
                                                    ])
                                                    ->get();
                                            @endphp

                                            <label class="form-label ">{{ lang('Select User') }} <span class="text-danger">*</span></label>
                                            <select name="customer" class="required" id="customerList">
                                                {{-- <option value="">{{ lang('Select Customer') }}</option> --}}
                                                <option value="" disabled selected>{{ lang('Select Customer') }}</option>
                                                @foreach ($customers as $cust)
                                                    <option value="{{ $cust->id }}">
                                                        {{ $cust->firstname . ' ' . $cust->lastname }}</option>
                                                @endforeach
                                            </select>
                                            <span class="text-danger errors"></span>

                                        </div>

                                        <div class="form-group col-6 errorSection tickets" style="display: none">
                                            <label class="form-label">{{ lang('Select Ticket') }}</label>
                                            <select name="ticket" id="ticketList">
                                                {{-- <option value=""></option> --}}
                                                {{-- <option value="" disabled selected>{{ lang('Select Ticket') }}</option> --}}
                                            </select>
                                            <span class="text-danger errors"></span>
                                        </div>

                                        <div class=" form-group col-6">
                                            <label for="status" class="form-label customer-field">{{lang('Status')}}</label>
                                            <select name="status" id="status">
                                                {{-- <option value="">{{ lang('Select Status') }}</option> --}}
                                                <option value="pending">{{ lang('Pending') }}</option>
                                                <option value="paid">{{ lang('Paid') }}</option>
                                            </select>
                                        </div>

                                        <div class=" form-group col-6 datediv" style="display: none">
                                            <label for="invoice-date-issued" class="form-label">{{lang('Paid Date')}}</label>
                                            <input name="paidDate" type="text" class="form-control flatpickr-input"
                                                id="paidDate" placeholder="Choose date" readonly="readonly">
                                        </div>

                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Email')}}</label>
                                            <input name="clemail" type="text" class="form-control customer-field"
                                                placeholder="Enter Client email">
                                        </div>

                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Mobile')}}</label>
                                            <input name="clmobile" type="text" class="form-control customer-field"
                                                placeholder="Enter Client Mobile No.">
                                        </div>

                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('GST / VAT')}}</label>
                                            <input name="cltaxName" type="text" class="form-control customer-field"
                                                placeholder="Enter client GST / VAT">
                                        </div>

                                        <!-- Tax ID -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Tax ID')}}</label>
                                            <input name="cltaxId" type="text" class="form-control customer-field"
                                                placeholder="Enter client Tax ID">
                                        </div>

                                        <!-- Company Name -->
                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Company Name')}}</label>
                                            <input name="clcompanyName" type="text" class="form-control customer-field"
                                                placeholder="Enter Client Company Name">
                                        </div>

                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Address')}}</label>
                                            <input name="claddress" type="text" class="form-control customer-field"
                                                placeholder="Enter Client address">
                                        </div>


                                        <div class="form-group col-6">
                                            <label class="form-label">{{lang('Country')}}</label>
                                            <input name="clcountry" type="text" class="form-control customer-field"
                                                placeholder="Enter Client country">
                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="row gy-3">
                                <div class="col-xl-12">
                                    <div class="table-responsive">
                                        @php
                                            $currency = \App\Models\Currency::first();
                                            $code = $currency->code;
                                        @endphp
                                        <table class="table  nowrap text-nowrap border mt-3">
                                            <thead class="bg-primary-transparent">
                                                <tr>
                                                    <th scope="col" class="w-25 text-dark">{{lang('Title')}} <span
                                                            class="text-danger">*</span></th>
                                                    <th scope="col" class="w-10 text-dark">{{lang('Price')}} <span
                                                            class="text-danger">*</span></th>
                                                    <th scope="col" class="w-10 text-dark">{{lang('Quantity')}} <span
                                                            class="text-danger">*</span></th>
                                                    <th scope="col" class="w-10 text-dark">{{lang('Amount')}} <span
                                                            class="text-danger">*</span></th>
                                                    <th scope="col" class="w-10 text-dark">{{lang('Action')}}</th>
                                                </tr>
                                            </thead>
                                            <tbody class=" invoice-body">
                                                <tr class="invoice-list">
                                                    <td class="errorSection">
                                                        <input type="text" name="title1"
                                                            class="form-control required"
                                                            placeholder="Enter Product Name">
                                                        <span class="text-danger errors"></span>
                                                    </td>
                                                    <td class="errorSection">
                                                        <div class="input-group price-input-group">
                                                            <div class="input-group-text text-muted">
                                                                {{ config('currencies.' . $code) }}</div>
                                                            <input type="number"
                                                                class="form-control price-input required w-20"
                                                                min="1" name="price1" id="updateyo1"
                                                                value=""
                                                                oninput="this.value = Math.max(this.value, 1)">
                                                        </div>
                                                        <span class="text-danger errors"></span>
                                                    </td>
                                                    <td class="errorSection">
                                                        <div class="input-group">
                                                            <input type="number"
                                                                class="form-control quantity-input required w-20"
                                                                min="1" name="quantity1" id="quantity1"
                                                                value="1"
                                                                oninput="this.value = Math.max(this.value, 1)" >
                                                        </div>
                                                        <span class="text-danger errors"></span>
                                                    </td>
                                                    <td class="errorSection">
                                                        <div class="input-group price-input-group">
                                                            <div class="input-group-text text-muted">
                                                                {{ config('currencies.' . $code) }}</div>
                                                            <input type="number"
                                                                class="form-control amount-input required w-20"
                                                                name="amount1" id="amount1" value=""
                                                                readonly>
                                                        </div>
                                                        <span class="text-danger errors"></span>
                                                    </td>
                                                    <td>
                                                        <button type="button"
                                                            class="btn btn-icon btn-outline-primary invoice-add-item"><i
                                                                class="ri ri-add-line"></i></button>
                                                    </td>
                                                </tr>


                                                <tr>
                                                    <td>
                                                        <label class="form-label">{{lang('Notes')}}</label>
                                                        <textarea name="invoicenote" class="form-control customer-field" placeholder="Enter Client address"></textarea>
                                                    </td>
                                                    <td></td>
                                                    <td></td>
                                                    <td>

                                                        <input id="tax" type="text"
                                                            class="form-control text-end " value="Tax: " readonly>
                                                    </td>
                                                    <td>
                                                        <div class="input-group price-input-group">
                                                            <label></label>
                                                            <input name="taxPercent" id="taxPercent" type="number"
                                                                class="form-control text-start"
                                                                value="{{ setting('taxPercent') }}">
                                                            <span class="input-group-text">%</span>
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <label class="form-label">{{lang('Terms & Conditions')}}</label>
                                                        <textarea name="invoicetc" class="form-control customer-field" placeholder="Enter Client country"></textarea>
                                                    </td>

                                                    <td></td>
                                                    <td></td>
                                                    <td>
                                                        <input id="tax" type="text"
                                                            class="form-control text-end " value="Sub Total: " readonly>
                                                    </td>
                                                    <td>
                                                        <div class="input-group price-input-group">
                                                            <span
                                                                class="input-group-text text-muted">{{ config('currencies.' . $code) }}</span>
                                                            <input name="subtotal" id="subtotal" type="text"
                                                                class="form-control text-start" value="">
                                                        </div>
                                                    </td>

                                                </tr>

                                                <tr class="bg-primary-transparent">
                                                    <td> </td>
                                                    <td> </td>
                                                    <td> </td>

                                                    <td class="text-end text-dark fs-16 fw-semibold">{{lang('Total Amount:')}}</td>
                                                    <td class="text-start text-dark fs-16 ps-4 fw-semibold"
                                                        id="finalPrice">0.00</td>
                                                </tr>
                                            </tbody>
                                        </table>



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

                    </div>
                    {{-- </form> --}}
                    <div class="card-footer text-end">
                        <button class="btn btn-danger d-inline-flex ">{{lang('Cancel')}}</button>
                        <button type="button" id="formSubmitBtn" class="btn btn-primary d-inline-flex">{{lang('Create Invoice')}}
                        </button>
                    </div>

            </form>
        </div>
    </div>
    </div>
    <!-- End:: row-1 -->
    {{-- @include('admin.includes.search-modal') --}}
@endsection

@section('scripts')
    <script src="{{ asset('build/assets/plugins/flatpickr/flatpickr.min.js') }}?v=1746412455"></script>
    {{-- <!-- Choices JS -->
    <script src="{{ asset('build/assets/plugins/choices.min.js') }}"></script> --}}

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var SITEURL = '{{ url('') }}';

            let customers = @json($customers);

            // new Choices('#customerList');
            $('#customerList').select2();

            $('#ticketList').select2({
                minimumResultsForSearch: '',
                width: '100%'
            });


            $('#status').select2({
                minimumResultsForSearch: Infinity,
                width: '100%'
            });

            // Due date
            flatpickr("#invoice-date-due", {
                minDate: "today"
            });

            $('#status').on('change', function(e) {
                if (this.value == 'paid') {
                    document.querySelector('.datediv').style.display = 'block';
                    flatpickr("#paidDate", {
                        maxDate: "today",
                        defaultDate: "today"
                    });
                } else {
                    document.querySelector('.datediv').style.display = 'none';
                    $('#paidDate').val('');

                }
            });

            $('#customerList').on('change', function(e) {
                const customerId = this.value;
                const ticketList = document.getElementById('ticketList');
                const ticketSection = document.querySelector('.tickets');
                ticketList.innerHTML = '<option value="" disabled selected>{{ lang('Select Ticket') }}</option>';

                if (customerId) {

                    let cust = customers.filter(cust => cust.id == customerId);

                    if (cust.length > 0) {
                        // Access the first matching customer (assuming customerId is unique)
                        let customer = cust[0];

                        // Populate customer details into the form fields
                        document.querySelector('[name="clcompanyName"]').value = customer.companyName || '';
                        document.querySelector('[name="clemail"]').value = customer.email || '';
                        document.querySelector('[name="clmobile"]').value = customer.phone || '';
                        document.querySelector('[name="cltaxName"]').value = customer.taxName || '';
                        document.querySelector('[name="cltaxId"]').value = customer.taxId || '';
                        document.querySelector('[name="claddress"]').value = customer.Address || '';
                        document.querySelector('[name="clcountry"]').value = customer.country || '';

                        // Assuming tickets are available for the selected customer, show them
                        if (customer.tickets && customer.tickets.length > 0) {
                            ticketSection.style.display = 'block';
                            customer.tickets.forEach(ticket => {
                                const option = document.createElement('option');
                                option.value = ticket.id;
                                option.textContent = ticket.ticket_id;
                                ticketList.appendChild(option);
                            });
                        } else {
                            ticketSection.style.display = 'none';
                        }
                    } else {
                        alert('Customer details not found.');
                    }
                } else {
                    document.querySelectorAll('.customer-field').forEach(field => field.value = '');
                    ticketSection.style.display = 'none';
                }
            });


            document.getElementById('invoiceLogo').addEventListener('change', function(event) {
                const fileInput = event.target;
                const file = fileInput.files[0];
                const preview = document.getElementById('logoPreview');
                const placeholder = document.getElementById('uploadPlaceholder');
                const deleteButton = document.getElementById('deleteImage');

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.classList.remove('d-none');
                        placeholder.classList.add('d-none');
                    };

                    reader.readAsDataURL(file);
                } else {
                    resetImage();
                }
            });

            // Handle delete button click
            document.getElementById('deleteImage').addEventListener('click', function() {
                resetImage();
            });

            function resetImage() {
                const preview = document.getElementById('logoPreview');
                const placeholder = document.getElementById('uploadPlaceholder');
                const deleteButton = document.getElementById('deleteImage');
                const fileInput = document.getElementById('invoiceLogo');

                // Reset file input and preview
                fileInput.value = '';
                preview.src = '';
                preview.classList.add('d-none');
                placeholder.classList.remove('d-none');
                deleteButton.classList.add('d-none');
            }

            document.querySelector('input[name="price1"]').addEventListener('blur', function() {
                if (this.value < 1) {
                    this.value = 1;
                }
            });

            $(document).on('input', '.price-input, .quantity-input, #taxPercent', function() {
                const row = $(this).closest('tr');
                let price = parseFloat(row.find('.price-input').val()) || 0;
                let quantity = parseFloat(row.find('.quantity-input').val()) || 0;
                let amount = price * quantity;
                row.find('.amount-input').val(amount.toFixed(2));

                updateFinalAmount();
            });

            let updateFinalAmount = () => {
                let totalPrice = 0;
                $('.amount-input').each(function() {
                    const value = parseFloat($(this).val()) || 0;
                    totalPrice += value;
                });

                $('#subtotal').val(totalPrice.toFixed(2));

                if ($('#taxPercent').val()) {
                    let tax = $('#taxPercent').val();
                    totalPrice += totalPrice * tax / 100
                }

                $('#finalPrice').html('{{ config('currencies.' . $code) }} ' + totalPrice.toFixed(2));
                $('#totalFinalPrice').val(totalPrice.toFixed(2));
            };


            const tableBody = document.querySelector(".invoice-body");
            const addItemButtons = document.querySelectorAll(".invoice-add-item");

            let totalPrice;
            let finalPriceElement = tableBody.querySelector('#finalPrice');
            let counter = 2;
            addItemButtons.forEach(function(addItemButton) {
                addItemButton.addEventListener("click", function() {
                    // Create a new row
                    const newRow = document.createElement("tr");
                    newRow.classList.add("invoice-list");

                    // Define the structure of the new row
                    newRow.innerHTML = `
                        <!-- ... New row content ... -->
                        <td class="errorSection">
                            <input type="text" name="title${counter}" class="form-control required" placeholder="Enter Product Name">
                            <span class="text-danger errors"></span>
                        </td>
                        <td class="errorSection">
                            <div class="input-group price-input-group">
                                <div class="input-group-text  text-muted">{{ config('currencies.' . $code) }}</div>
                                <input type="number" class="form-control price-input required abcdef w-20"  min="1" name="price${counter}" id="updateyo${counter}" value="" oninput="this.value = Math.max(this.value, 1)">
                            </div>
                            <span class="text-danger errors"></span>
                        </td>
                         <td class="errorSection">
                            <div class="input-group">
                                <input type="number" class="form-control quantity-input required w-20" min="1" name="quantity${counter}" id="quantity${counter}" value="1" oninput="this.value = Math.max(this.value, 1)">
                            </div>
                            <span class="text-danger errors"></span>
                        </td>
                         <td class="errorSection">
                            <div class="input-group price-input-group">
                                <div class="input-group-text  text-muted">{{ config('currencies.' . $code) }}</div>
                                <input type="number" class="form-control amount-input required w-20" name="amount${counter}" id="amount${counter}" value="" readonly>
                            </div>
                            <span class="text-danger errors"></span>
                        </td>
                        <td>
                            <button type="button" class="btn  btn-icon btn-outline-danger invoice-btn remove-row"><i class="ri-delete-bin-5-line"></i></button>
                        </td>
                    `;
                    counter++;

                    // Insert the new row below the current row
                    const currentRow = addItemButton.closest("tr.invoice-list");
                    currentRow.after(newRow);

                    // Add a remove button to the new row
                    const removeButton = newRow.querySelector(".remove-row");
                    removeButton.addEventListener("click", function(ele) {
                        tableBody.removeChild(newRow);
                        updateFinalAmount();
                    });
                });
            });

            let submitEvent = () => {

                let createInvoiceForm = document.querySelector('#createInvoiceForm');
                let submitButton = document.querySelector('#formSubmitBtn');
                let hasError = false;


                document.querySelectorAll('.text-danger.errors').forEach((ele) => {
                    ele.innerHTML = '';
                });


                document.querySelectorAll('.required').forEach((ele) => {
                    if (ele.value == '') {
                        ele.closest('.errorSection').querySelector('.text-danger.errors').innerHTML =
                            'This field is required';
                        hasError = true;
                    } else {
                        ele.closest('.errorSection').querySelector('.text-danger.errors').innerHTML =
                            '';
                    }
                });

                if (hasError) {
                    return;
                }

                submitButton.disabled = true;
                submitButton.innerHTML = 'Submitting...';
                createInvoiceForm.submit();
            }
            document.querySelector('#formSubmitBtn').addEventListener('click', submitEvent);
        });
    </script>
@endsection