@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')

@section('css')
    <style>
        /* Summary row */
        table.table>tbody>tr.summary-row>td {
            background-color: #9bedae !important;
            /* light green */
        }

        /* Outer details row background (cell) */
        table.table>tbody>tr.details-row>td {
            background-color: #6ea4d6 !important;
            /* light blue */
        }

        /* Inner table rows */
        table.table>tbody>tr.details-row table.table-sm tbody tr>td {
            background-color: #e9f5ff !important;
            /* light cyan/blue */
        }

        /* Inner table header */
        table.table>tbody>tr.details-row table.table-sm thead tr>th {
            background-color: #cfe8fc !important;
            /* slightly darker header */
        }
    </style>

@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Bill & Item wise profit/ loss</h3>
                    <div class="d-flex ms-auto">
                        <a href="{{ route('admin.reports.profit_loss') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger">
                                <i class="fa fa-arrow-circle-left"></i> Add
                            </button>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form class="" id="filter_form" method="get"
                        action="{{ route('admin.reports.sale_profit_loss') }}">
                        <div class="row">
                            <div class="col-md-2">
                                <x-admin-input type="date" class="filter_form_input" name="fromDate" id="from-date"
                                    value="{{ request('fromDate') }}" onchange="this.form.submit()"></x-admin-input>
                            </div>

                            <div class="col-md-2">
                                <x-admin-input type="date" name="toDate" id="to-date" value="{{ request('toDate') }}"
                                    onchange="this.form.submit()"></x-admin-input>
                            </div>

                            <div class="col-md-1">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#searchModal">
                                    Search
                                </button>
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-secondary" onclick="toggleAll(this)">➕ Expand</button>
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" name="filterField">
                                    <option value="">-- Select Filter Field --</option>
                                    <option value="Party_name"
                                        {{ request('filterField') == 'Party_name' ? 'selected' : '' }}>Party name</option>
                                    <option value="Paymnt_Term"
                                        {{ request('filterField') == 'Paymnt_Term' ? 'selected' : '' }}>Paymnt Term</option>
                                    <option value="Sale_Type" {{ request('filterField') == 'Sale_Type' ? 'selected' : '' }}>
                                        Sale Type</option>
                                    <option value="Item_name" {{ request('filterField') == 'Item_name' ? 'selected' : '' }}>
                                        Item name</option>
                                    <option value="Item_group"
                                        {{ request('filterField') == 'Item_group' ? 'selected' : '' }}>Item group</option>
                                    <option value="Item_company"
                                        {{ request('filterField') == 'Item_company' ? 'selected' : '' }}>Item Company
                                    </option>
                                    <option value="brand_name"
                                        {{ request('filterField') == 'brand_name' ? 'selected' : '' }}>Brand Name
                                    </option>
                                    <option value="product_part_no"
                                        {{ request('filterField') == 'product_part_no' ? 'selected' : '' }}>Part No
                                    </option>
                                    <option value="Tax" {{ request('filterField') == 'Tax' ? 'selected' : '' }}>Tax %
                                    </option>
                                    <option value="Qty" {{ request('filterField') == 'Qty' ? 'selected' : '' }}>Qty
                                        (range)</option>
                                    <option value="Alt_qty" {{ request('filterField') == 'Alt_qty' ? 'selected' : '' }}>Alt
                                        Qty (range)</option>
                                    <option value="Basic_amount"
                                        {{ request('filterField') == 'Basic_amount' ? 'selected' : '' }}>Basic Amount
                                    </option>
                                    <option value="Nat_amount"
                                        {{ request('filterField') == 'Nat_amount' ? 'selected' : '' }}>Nat Amount</option>
                                    <option value="Bill_amount"
                                        {{ request('filterField') == 'Bill_amount' ? 'selected' : '' }}>Bill Amount
                                    </option>
                                    <option value="Remarke" {{ request('filterField') == 'Remarke' ? 'selected' : '' }}>
                                        Remarke</option>
                                </select>
                            </div>

                            {{-- Filter Value --}}
                            <div class="col-md-3">
                                <input type="text" class="form-control filter_form_input" name="filterFieldValue"
                                    value="{{ request('filterFieldValue') }}" placeholder="Enter value">
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-info">OK</button>
                            </div>

                        </div>
                    </form>
                    @php
                        $totalQty = collect($sales)->sum(function ($sale) {
                            return (float) preg_replace('/[^\d.\-]/', '', $sale['total_qty']);
                        });
                        $totalValue = collect($sales)->sum(function ($sale) {
                            return (float) preg_replace('/[^\d.\-]/', '', $sale['total_value']);
                        });
                        $totalCost = collect($sales)->sum(function ($sale) {
                            return (float) preg_replace('/[^\d.\-]/', '', $sale['total_cost']);
                        });
                        $totalProfit = collect($sales)->sum(function ($sale) {
                            return (float) preg_replace('/[^\d.\-]/', '', $sale['total_profit_loss']);
                        });
                    @endphp

                    <div class="table-responsive mt-1">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Bill No.</th>
                                    <th>Total Qty</th>
                                    <th>Sale Value</th>
                                    <th>Purchase Cost</th>
                                    <th>Profit/Loss</th>
                                    <th>Profit/Loss %</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($sales as $sale)
                                    {{-- Summary Row --}}
                                    <tr class="summary-row">
                                        <td>{{ \Carbon\Carbon::parse($sale['date'])->format('d-m-Y') }}</td>
                                        <td>{{ $sale['bill_no'] }}</td>
                                        <td>{{ $sale['total_qty'] }}</td>
                                        <td>{{ $sale['total_value'] }}</td>
                                        <td>{{ $sale['total_cost'] }}</td>
                                        <td>{{ $sale['total_profit_loss'] }}</td>
                                        <td>{{ $sale['total_profit_percent'] }}</td>
                                        <td>
                                            <button class="btn btn-info btn-sm"
                                                onclick="toggleItems('{{ $sale['bill_no'] }}', this)">
                                                ➕ Expand
                                            </button>
                                        </td>
                                    </tr>
                                    {{-- Detail Items Row --}}
                                    <tr id="items-{{ $sale['bill_no'] }}" class="details-row" style="display: none;">
                                        <td colspan="8" class="p-0">
                                            <table class="table table-sm table-bordered mb-0"
                                                style="table-layout: fixed; width: 100%;">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 100px; white-space: nowrap;">Part No.</th>
                                                        <th style="width: 180px; white-space: nowrap;">Item Name</th>
                                                        <th style="width: 130px; white-space: nowrap;">Brand</th>
                                                        <th style="width: 60px; text-align: right; white-space: nowrap;">Qty
                                                        </th>
                                                        <th style="width: 90px; text-align: right; white-space: nowrap;">
                                                            Sale Value</th>
                                                        <th style="width: 90px; text-align: right; white-space: nowrap;">
                                                            Purchase Cost</th>
                                                        <th style="width: 110px; text-align: right; white-space: nowrap;">
                                                            Profit/Loss</th>
                                                        <th style="width: 110px; text-align: right; white-space: nowrap;">
                                                            Profit/Loss %</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($sale['items'] as $item)
                                                        <tr>
                                                            <td
                                                                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                                {{ $item['product_part_no'] }}</td>
                                                            <td
                                                                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                                {{ $item['item_name'] }}</td>
                                                            <td
                                                                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                                {{ $item['brand_name'] }}</td>
                                                            <td style="text-align: right;">{{ $item['qty'] }}</td>
                                                            <td style="text-align: right;">{{ $item['value'] }}</td>
                                                            <td style="text-align: right;"
                                                                id="{{ $sale['bill_no'] }}-bill_item-cost-{{ $item['product_part_no'] }}">
                                                                {{ $item['cost'] }}
                                                            </td>
                                                            <td style="text-align: right;">{{ $item['profit_loss'] }}</td>
                                                            <td style="text-align: right;">
                                                                {{ $item['profit_loss_percent'] }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row ">
                        <!-- Card Section for Totals -->
                        <div class="row mb-3">
                            <div class="col-2 ml-auto">
                                <div class="card">
                                    <div class="card-body">
                                        Total Qty
                                        <hr>
                                        <div class="w-100 text-right" id="">{{ $totalQty }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="card">
                                    <div class="card-body">
                                        Sale Value
                                        <hr>
                                        <div class="w-100 text-right" id="">{{ $totalValue }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="card">
                                    <div class="card-body">
                                        Purchase Cost
                                        <hr>
                                        <div class="w-100 text-right" id="">{{ $totalCost }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card">
                                    <div class="card-body">
                                        Total Profit/Loss
                                        <hr>
                                        <div class="w-100 text-right" id="">{{ $totalProfit }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card">
                                    <div class="card-body">
                                        Total Profit/Loss %
                                        <hr>
                                        <div class="w-100 text-right" id="">
                                            {{ $totalValue > 0 ? number_format(($totalProfit / $totalValue) * 100, 2) . '%' : '0%' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">Search Filters</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Popup Form -->
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <label>Bill No.</label>
                            <select name="billId" id="billId" class="form-control">
                                <option value="">Select Bill</option>
                                @foreach ($bills as $bill)
                                    <option value="{{ $bill->id }}">{{ $bill->bill_no }}</option>
                                @endforeach
                            </select>
                            {{-- <input type="text" class="form-control" name="billNo"> --}}
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-4">
                            <input type="checkbox" name="withTax" value="1"> With Tax
                        </div>
                        <div class="col-md-4">
                            <input type="checkbox" name="saleEntries" value="1"> Sale Entries
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-12">
                            <label>Calculate Cost as per</label>
                            <select class="form-control" name="costCalc">
                                <option value="Average_Purchase_Price">Average Purchase Price</option>
                                <option value="Average_Sale_Price">Average Sale Price</option>
                                <option value="Opening_Stock_Value_Qty">Opening Stock Value / Qty</option>
                                <option value="Opening_Average_SelfVal">Opening + Average + SelfVal</option>
                                <option value="Net_Rate_Purchase">Net Rate (Purchase)</option>
                                <option value="SalePrice">SalePrice</option>
                                <option value="PurchasePrice">PurchasePrice</option>
                                <option value="MRP_Purchase">MRP Purchase</option>
                                <option value="MRP_Sale">MRP Sale</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" form="filter" class="btn btn-success"
                        id="profitLossFilterSubmit">Search</button>
                </div>
            </div>
        </div>
    </div>
    @section('js')
        <!-- Bootstrap 5 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- Bootstrap 5 JS + Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            function toggleItems(billNo, btn) {
                let row = document.getElementById('items-' + billNo);
                if (row.style.display === 'none') {
                    row.style.display = '';
                    btn.innerHTML = '➖ Collapse';
                } else {
                    row.style.display = 'none';
                    btn.innerHTML = '➕ Expand';
                }
            }

            function toggleAll(btn) {
                let allRows = document.querySelectorAll('[id^="items-"]');
                let expand = btn.innerHTML.includes('Expand'); // agar "Expand" hai to open karna

                allRows.forEach(function(row) {
                    row.style.display = expand ? '' : 'none';
                });

                // Individual buttons ka text bhi change kare
                document.querySelectorAll('.toggle-btn').forEach(function(b) {
                    b.innerHTML = expand ? '➖Collapse' : '➕ Expand';
                });

                // Main button ka text toggle kare
                btn.innerHTML = expand ? '➖Collapse' : '➕ Expand';
            }
        </script>
        <script>
            $(document).on('change', '.filter_form_input', function(e) {
                $("#filter_form").submit();
            })
            $(document).on('click', '#profitLossFilterSubmit', function(e) {

                let data = {
                    accountId: $('#accountId').val(),
                    billId: $('#billId').val(),
                    withTax: $('input[name="withTax"]').is(':checked'),
                    saleEntries: $('input[name="saleEntries"]').is(':checked'),
                    costCalc: $('select[name="costCalc"]').val()
                }

                $.ajax({
                    url: "{{ route('admin.reports.sale-profit-loss-ajax-calculator') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        // Handle the response from the server
                        if (response.status === 'success') {
                            let results = response.data;
                            results.forEach(function(bill, index) {
                                let bill_items = bill.bill_items;
                                console.log("bill_items ", bill_items);

                                bill_items.forEach(function(item) {
                                    let cost = item.cost;
                                    console.log("bill_item-cost-" + item.product_part_no,
                                        cost);
                                    // Update the corresponding table cell
                                    $('#' + bill.bill_no + '-bill_item-cost-' + item
                                        .product_part_no).text(cost);
                                });
                            });

                            // Update the table with new data

                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("An error occurred while processing your request.");
                    }
                });
            })
        </script>

    @endsection