@extends('printlayout')
@section('content')
    <div style="text-align: center;">
        <h2 style="margin-top: 0">{{ __('sitelabel.GatePass') }}</h2>
    </div>

    <div class="transaction-info">
        <ul style="display: flex; list-style:none; justify-content:space-between; padding: 0px;">
            <li><strong>{{ __('sitelabel.GatePassNo') }}: </strong>{{ $gatepass->PassNo }}</li>
            <li><strong>{{ __('sitelabel.Date') }}: </strong>{{ $gatepass->Date }}</li>
        </ul>
    </div>

    <!-- GatePass Section -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.Type') }}</th>
                    <th class="case-outword" style="background-color: #0C133A; color: #fff">
                        {{ __('sitelabel.FromWarehouse') }}</th>
                    <th class="case-outword" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.ToVendor') }}
                    <th class="case-outword" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.ToCustomer') }}
                    </th>
                    <th class="case-outword" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.SaleOrder') }}
                    </th>
                    <th class="case-inword" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.FromVendor') }}
                    </th>
                    <th class="case-inword" style="background-color: #0C133A; color: #fff">
                        {{ __('sitelabel.ToWarehouse') }}</th>
                    <th class="case-inword" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.GRN') }}</th>
                    <th class="case-w2w" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.FromWarehouse') }}
                    </th>
                    <th class="case-w2w" style="background-color: #0C133A; color: #fff">{{ __('sitelabel.ToWarehouse') }}
                    </th>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.Description') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ $gatepass->Type }}</td>
                    <td class="case-outword">{{ $gatepass->FromWarehouse }}</td>
                    <td class="case-outword">{{ $gatepass->Vendor }}</td>
                    <td class="case-outword">{{ $gatepass->Customer }}</td>
                    <td class="case-outword">{{ $gatepass->SaleOrder }}</td>
                    <td class="case-inword">{{ $gatepass->Vendor }}</td>
                    <td class="case-inword">{{ $gatepass->FromWarehouse }}</td>
                    <td class="case-inword">{{ $gatepass->GRN }}</td>
                    <td class="case-w2w">{{ $gatepass->FromWarehouse }}</td>
                    <td class="case-w2w">{{ $gatepass->ToWarehouse }}</td>
                    <td>{{ $gatepass->PassDescription }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    {{-- Details Section --}}
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="background-color: #F36F24; color: #fff;text-align:center;width:10%">
                        {{ __('sitelabel.SerialNumber') }}</th>
                    <th style="background-color: #F36F24; color: #fff">{{ __('sitelabel.Product') }}</th>
                    <th style="background-color: #F36F24; color: #fff">{{ __('sitelabel.Bundle') }}</th>
                    <th style="background-color: #F36F24; color: #fff">{{ __('sitelabel.Quantity') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($detail as $item)
                    <tr>
                        <td style="text-align:center;">{{ $loop->iteration }}</td>
                        <td>{{ $item->Product }}</td>
                        <td>{{ rtrim(rtrim(number_format($item->Bundle, 2), '0'), '.') }}</td>
                        <td>{{ $item->Quantity}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Driver Section --}}
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.DriverName') }}</th>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.TransportCompany') }}</th>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.PhoneNo') }}</th>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.BuiltyNo') }}</th>
                    <th style="background-color: #0C133A; color: #fff">{{ __('sitelabel.VehicleNo') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ $vehicle->DriverName }}</td>
                    <td>{{ $vehicle->TransportCompany }}</td>
                    <td>{{ $vehicle->PhoneNo }}</td>
                    <td>{{ $vehicle->BuiltyNo }}</td>
                    <td>{{ $vehicle->VehicleNo }}</td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="background-color: #F36F24; color: #fff; text-align:right;width:20%">
                        {{ __('sitelabel.Weight') }}</th>
                    <th style="background-color: #F36F24; color: #fff; text-align:right;width:20%">
                        {{ __('sitelabel.Rate') }}</th>
                    <th style="background-color: #F36F24; color: #fff; text-align:right;width:20%">
                        {{ __('sitelabel.Amount') }}</th>
                    <th style="background-color: #F36F24; color: #fff; text-align:right;width:20%">
                        {{ __('sitelabel.WeighingCharges') }}</th>
                    <th style="background-color: #F36F24; color: #fff; text-align:right;width:20%">
                        {{ __('sitelabel.Total') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align: right">{{ rtrim(rtrim(number_format($vehicle->Weight, 4), '0'), '.') }}</td>
                    <td style="text-align: right">{{ rtrim(rtrim(number_format($vehicle->Rate, 2), '0'), '.') }}</td>
                    <td style="text-align: right">{{ rtrim(rtrim(number_format($vehicle->Amount, 2), '0'), '.') }}</td>
                    <td style="text-align: right">{{ rtrim(rtrim(number_format($vehicle->WeighingCharges, 2), '0'), '.') }}
                    </td>
                    <td style="text-align: right">{{ rtrim(rtrim(number_format($vehicle->TotalAmount, 2), '0'), '.') }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    @include('sign-subview.signandbuttons')
@endsection

@section('script')
    <script>
        function togglePassTypeFields() {
            const passType = "{{ $gatepass->TypeId }}"; // Dynamically fetched value
            const fields = {
                outword: document.querySelectorAll('.case-outword'),
                inword: document.querySelectorAll('.case-inword'),
                w2w: document.querySelectorAll('.case-w2w')
            };

            // Hide all fields initially
            Object.values(fields).forEach(fieldSet => {
                fieldSet.forEach(field => (field.style.display = 'none'));
            });

            // Show relevant fields based on passType
            if (passType == 1) {
                fields.inword.forEach(field => (field.style.display = 'table-cell'));
            } else if (passType == 2) {
                fields.outword.forEach(field => (field.style.display = 'table-cell'));
            } else if (passType == 3) {
                fields.w2w.forEach(field => (field.style.display = 'table-cell'));
            }
        }

        // Trigger the function once the DOM is fully loaded
        document.addEventListener('DOMContentLoaded', togglePassTypeFields);
    </script>
@endsection