@extends('backend.partials.master')

@section('title')
Customer Purchase Price
@endsection

@section('maincontent')
<style>
/* Table container */
table.dataTable {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fff;
}

/* Table header */
table.dataTable thead {
    background-color: #f8f9fa; /* light gray header */
    color: #495057;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

/* Table header cells */
table.dataTable thead th {
    padding: 12px 10px;
    font-size: 14px;
}

/* Table body rows */
table.dataTable tbody tr {
    border-bottom: 1px solid #dee2e6;
}

/* Alternate row shading */
table.dataTable tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

/* Table body cells */
table.dataTable tbody td {
    padding: 10px;
    font-size: 13px;
    color: #495057;
}

/* Pagination, search, and buttons */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    height: 32px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 4px;
    height: 32px;
}

.dataTables_wrapper .dt-buttons button {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    color: #495057;
    padding: 4px 10px;
    margin-right: 4px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 10px;
}

.dataTables_wrapper .dt-buttons button:hover {
    background-color: #e9ecef;
    color: #212529;
}

/* Highlight the current page button */
.dataTables_wrapper .dataTables_paginate .current {
    background-color: #0d6efd;
    color: #fff !important;
    border-radius: 4px;
    padding: 4px 10px;
    border: 1px solid #0d6efd;
}

</style>

@php
    // 👉 जर route = view असेल तर READ-ONLY mode
    $isView = request()->routeIs('CustomerSellingPrice.view');
@endphp
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<main class="content">
    <div class="container-fluid p-0">

        <h1 class="h3 mb-3">
            @if($isView)
                View Customer Sale Price
            @else
                Customer Sale Price
            @endif
        </h1>

        <div class="card">
            <div class="card-body">

                {{-- ❌ VIEW MODE मध्ये form submit नको --}}
                <form @if(!$isView)
                        method="POST"
                        action="{{ route('CustomerSellingPrice.store') }}"
                      @endif
                >
                    @csrf

                    {{-- ================= LOT NO ================= --}}
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Lot No</label>

                            <input type="text"
                                   class="form-control"
                                   value="{{ $old[0]->lot_no ?? '' }}"
                                   readonly>
                        </div>
                    </div>

                    {{-- ================= TABLE ================= --}}
                    <div class="table-responsive">
                        <table class="table table-bordered" id="poTable">
                            <thead>
                                <tr>
                                    <th>Sr</th>
                                    <th>Lot No</th>
                                    <th>Product</th>
                                    <th>Rate</th>
                                    <th>Expense</th>
                                    <th>Commission %</th>

                                    @foreach($customers as $c)
                                        <th>{{ $c->fname }}</th>
                                    @endforeach
                                </tr>
                            </thead>

                           <tbody>
@forelse($products as $productId => $items)
    @php
        $first = $items->first(); // common data
    @endphp
  <tr>
    <td>{{ $loop->iteration }}</td>
    <td>{{ $first->lot_no }}</td>
    <td>{{ $first->product_name }}</td>
    <td>{{ number_format($first->rate, 2) }}</td>
    <td>{{ number_format($first->expense, 2) }}</td>
    <td>{{ number_format($first->commission_percent, 2) }}%</td>

    @foreach($customers as $c)
        @php $price = $items->firstWhere('customer_id', $c->id); @endphp
        <td>{{ $price ? number_format($price->sale_price, 2) : '—' }}</td>
    @endforeach
</tr>

@empty
    <tr>
        <td colspan="{{ 6 + count($customers) }}" class="text-center">
            No Data Found
        </td>
    </tr>
@endforelse
</tbody>
                        </table>
                    </div>

                    {{-- ================= BUTTONS ================= --}}
                    <div class="mt-3">
                        <a href="{{ route('CustomerSellingPrice') }}"
                           class="btn btn-secondary">
                            Back
                        </a>
                    </div>

                </form>

            </div>
        </div>

    </div>
</main>
@endsection
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
@push('scripts')
<script>
$('#poTable').DataTable({
    dom: '<"top-buttons"Bf>rtip', // <-- 'Bf' inside a div called top-buttons
    buttons: [
        {
            extend: 'excelHtml5',
            text: 'Export Excel',
            title: 'Customer Sale Price',
            exportOptions: {
                format: {
                    body: function (data, row, column, node) {
                        let input = $('input', node);
                        if (input.length) {
                            return input.val();
                        }
                        return data;
                    }
                }
            }
        },
        {
            extend: 'pdfHtml5',
            text: 'Export PDF',
            title: 'Customer Sale Price',
            orientation: 'landscape',
            pageSize: 'A4',
            exportOptions: {
                format: {
                    body: function (data, row, column, node) {
                        let input = $('input', node);
                        if (input.length) {
                            return input.val();
                        }
                        return data;
                    }
                }
            }
        }
    ],
    paging: true,
    searching: true,
    ordering: true,
    info: true
});


</script>
@endpush