@extends('master')
@section('title')
    Head Office Collect
@endsection
@section('content')
    @if (Session::has('success'))
        <div class="col-lg-5">
            <div class="alert alert-success" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="fa fa-check-circle-o mr-2" aria-hidden="true"></i> {{ Session::get('success') }}
            </div>
        </div>
    @elseif (Session::has('danger'))
        <div class="col-lg-5">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="fa fa-check-circle-o mr-2" aria-hidden="true"></i> {{ Session::get('danger') }}
            </div>
        </div>
    @endif

    <div class="container-fluid pt-4 px-4" style="">

        <div class="row g-2 bg-light">
            <div class="col-lg-11">
                <div class="bg-light rounded px-2 pt-2" style="padding-bottom:0px;">
                    {{-- <form action="{{ route('head_office_collect') }}" method="GET">
                        <div class="row">
                            <div class="col-lg-3">
                                <label for="exampleInputEmail1" class="form-label">Agent:</label>
                                <select name="status_name" class="form-control select2-show-search" style="width:100%"
                                    data-placeholder="Choose one">
                                    <option value="">Select Agent</option>
                                    @foreach ($agent as $item)
                                        <option value="{{ $item->agent_id }}">
                                            {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-3">
                                <label for="exampleInputEmail1" class="form-label">Form:</label>
                                <input type="date" class="form-control" name="form_date" value="{{ $form_date }}"
                                    placeholder="Enter Service" required>

                            </div>

                            <div class="col-lg-3">
                                <label for="exampleInputEmail1" class="form-label">To:</label>
                                <input type="date" class="form-control" name="todate" value="{{ $todate }}"
                                    placeholder="Enter Service">
                            </div>
                            <div class="col-lg-3">
                                <label for="exampleInputEmail1" class="form-label d-block"></label>
                                <button type="submit" class="btn btn-primary mt-4">Load</button>
                            </div>
                        </div>
                    </form> --}}
                </div>
            </div>
            {{-- <div class="col-lg-1">
                <div class="bg-light rounded px-2 pt-2" style="padding-bottom:0px;">
                    <form action="{{ route('booking_transfer_report_print') }}" method="GET" target="_blank">
                        <div class="d-flex gap-2 align-items-center">


                            <input type="hidden" class="form-control" name="form_date" value="{{ $form_date }}">


                            <input type="hidden" class="form-control" name="todate" value="{{ $todate }}">

                            <button type="submit" class="btn btn-secondary"><i class="fa fa-print"></i></button>

                        </div>
                    </form>
                </div>
            </div> --}}
        </div>

        <div class="row g-4">


            <div class="col-12">
                <form action="{{ route('head_office_collects') }}" method="POST">
                    @csrf

                    <div class="bg-light rounded h-100  pl-0">


                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h6></h6>

                            <p id="text" style="display: none;">
                                <button type="submit" class="btn btn-success " style="float: right;"
                                    onclick="return confirm('Are You Sure ?')"> <i class="fa fa-check"></i>
                                    Confirm</button>
                            </p>


                        </div>

                        {{-- <div class="table-responsive" style="min-height: 75vh;">
                        <table id="example" class="table table-bordered" style="width:100%;">
                            <thead>
                                <tr>
                                    <th style="text-align: center;"><input type="checkbox" class="selectall" /></th>
                                    <th>Invoice No</th>
                                    <th>Agent Name</th>
                                    <th>Status</th>
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($collect as $data)
                                    <tr>
                                        <td style="text-align: center; vertical-align: top;"><input type="checkbox"
                                                class="select_id" value="{{ $data->invoice_no }}" name="invoice_no[]" />
                                        </td>
                                        <td>{{ $data->invoice_no }}</td>
                                        <td>{{ $data->agents->name }}</td>
                                        <td>{{ $data->status }}</td>
                                        <td style="text-align: center;">


                                            <a class=""
                                                href="{{ route('collect_booking', ['id' => $data->invoice_no]) }}"
                                                onclick="return confirm('Are You Sure You Want To Collect ??')">

                                                <button class="btn btn-success"><i class="fa fa-check"></i> Collect
                                                </button>
                                            </a>

                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div> --}}
                        <div class="table-responsive">
                            <table id="example" class="table table-striped table-bordered" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" class="selectall" /></th>
                                        <th>Track no</th>
                                        <th>Origin</th>
                                        <th>Destination</th>
                                        <th>Weight(KG)</th>
                                        <th>Charge</th>
                                        <th>Shiper</th>
                                        <th>Consignee</th>
                                        <th>Amount</th>
                                        <th>Collected</th>
                                        <th>Status</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($booking as $data)
                                        <tr>
                                            <td style="text-align: center; vertical-align: top;"><input type="checkbox"
                                                    class="select_id" value="{{ $data->booking_no }}" name="booking_no[]" />
                                            </td>
                                            <td>{{ $data->booking_no }}</td>
                                            <td>{{ $data->origins->name ?? '' }}</td>
                                            <td>{{ $data->destinations->name ?? '' }}</td>
                                            <td>{{ $data->weights->weight ?? '' }}</td>
                                            <td>{{ $data->charge }}</td>
                                            <td>{{ $data->shipper }}</td>
                                            <td>{{ $data->consignee }}</td>
                                            <td>{{ $data->bill_amount }}</td>
                                            <td>{{ $data->collect_amount }}</td>
                                            <td>{{ $data->status }}</td>

                                        </tr>
                                    @endforeach
                            </table>
                        </div>
                    </div>
                    {{-- </form> --}}
            </div>
        </div>


    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function() {
            new DataTable('#example', {
                fixedHeader: true,
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            var value = 0;
            $(".select_id").change(function() {
                var text = document.getElementById("text");
                if ($(this).is(":checked")) {
                    text.style.display = "block";
                    value = value + 1;
                    var values = $("input[name='tracking_ids[]']")
                        .map(function() {
                            return $(this).val();
                        })
                        .get();
                    if (value == values.length) {
                        $(".select_id").prop("checked", true);
                    }
                } else if ($(this).is(":not(:checked)")) {
                    value = value - 1;
                    if (value == 0) {
                        $(".select_id").prop("checked", false);
                        text.style.display = "none";
                    }
                }
            });

            $(".selectall").click(function() {
                var text = document.getElementById("text");
                var checked = this.checked;

                if (checked == true) {
                    $(".select_id").prop("checked", true);
                    text.style.display = "block";
                } else {
                    $(".select_id").prop("checked", false);
                    text.style.display = "none";
                }
            });
        });
    </script>
@endsection