@extends('backend.layout.main')
@section('content')
    <x-success-message key="message" />
    <x-error-message key="not_permitted" />

    @push('styles')
        <style>
            /* Product type separation styling */
            .product-return-list tbody tr td span.badge {
                display: inline-block;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .product-return-list tbody tr[style*='#fff5f5']:hover {
                background-color: #ffe5e5 !important;
                transition: background-color 0.2s ease;
            }

            .product-return-list tbody tr[style*='#f0fff4']:hover {
                background-color: #e0ffe5 !important;
                transition: background-color 0.2s ease;
            }

            @media (max-width: 768px) {
                .product-return-list tbody tr td span.badge {
                    font-size: 8px;
                    padding: 1px 4px;
                }
            }
        </style>
    @endpush

    <section>
        <div class="container-fluid">
            <div class="card">
                <div class="card-header mt-2">
                    <h3 class="text-center">{{ __('db.Sale Exchange List') }}</h3>
                </div>
                <form action="{{ route('exchange.index') }}" method="GET">
                <div class="row mb-3">
                    <div class="col-md-4 offset-md-2 mt-3">
                        <div class="d-flex">
                            <label class="">{{ __('db.date') }} &nbsp;</label>
                            <div class="">
                                <div class="input-group">
                                    <input type="text" class="daterangepicker-field form-control"
                                        value="{{ $starting_date }} To {{ $ending_date }}" required />
                                    <input type="hidden" name="starting_date" value="{{ $starting_date }}" />
                                    <input type="hidden" name="ending_date" value="{{ $ending_date }}" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mt-3 @if (\Auth::user()->role_id > 2) {{ 'd-none' }} @endif">
                        <div class="d-flex">
                            <label class="">{{ __('db.Warehouse') }} &nbsp;</label>
                            <div class="">
                                <select id="warehouse_id" name="warehouse_id" class="selectpicker form-control"
                                    data-live-search="true" data-live-search-style="begins">
                                    <option value="0">{{ __('db.All Warehouse') }}</option>
                                    @foreach ($lims_warehouse_list as $warehouse)
                                        @if ($warehouse->id == $warehouse_id)
                                            <option selected value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                        @else
                                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 mt-3">
                        <div class="form-group">
                            <button class="btn btn-primary" id="filter-btn" type="submit">{{ __('db.submit') }}</button>
                        </div>
                    </div>
                </div>
                </form>
            </div>
            @if (in_array('exchange-add', $all_permission))
                <a href="#" data-toggle="modal" data-target="#add-exchange" class="btn btn-info"><i
                        class="dripicons-plus"></i> {{ __('db.Add Exchange') }}</a>
            @endif
        </div>
        <div class="table-responsive">
            <table id="return-table" class="table return-list" style="width: 100%">
                <thead>
                    <tr>
                        <th class="not-exported"></th>
                        <th>{{ __('db.date') }}</th>
                        <th>{{ __('db.reference') }}</th>
                        <th>{{ __('db.Sale Reference') }}</th>
                        <th>{{ __('db.Warehouse') }}</th>
                        <th>{{ __('db.Biller') }}</th>
                        <th>{{ __('db.customer') }}</th>
                        <th>{{ __('db.Payment Type') }}</th>
                        <th>{{ __('db.grand total') }}</th>
                        <th class="not-exported">{{ __('db.action') }}</th>
                    </tr>
                </thead>

                <tfoot class="tfoot active">
                    <th></th>
                    <th>{{ __('db.Total') }}</th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tfoot>
            </table>
        </div>

        <div id="return-details" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
            class="modal fade text-left">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="container mt-3 pb-2 border-bottom">
                        <div class="row">
                            <div class="col-md-6 d-print-none">
                                <button id="print-btn" type="button" class="btn btn-default btn-sm"><i
                                        class="dripicons-print"></i> {{ __('db.Print') }}</button>
                            </div>
                            <div class="col-md-6 d-print-none">
                                <button type="button" id="close-btn" data-dismiss="modal" aria-label="Close"
                                    class="close"><span aria-hidden="true"><i class="dripicons-cross"></i></span></button>
                            </div>
                            <div class="col-md-12">
                                <h3 id="exampleModalLabel" class="modal-title text-center container-fluid">
                                    {{ $general_setting->site_title }}</h3>
                            </div>
                            <div class="col-md-12 text-center">
                                <i style="font-size: 15px;">{{ __('db.Exchange Details') }}</i>
                            </div>
                        </div>
                    </div>
                    <div id="return-content" class="modal-body"></div>
                    <br>
                    <table class="table table-bordered product-return-list">
                        <thead>
                            <th>#</th>
                            <th>{{ __('db.product') }}</th>
                            <th>{{ __('db.Batch No') }}</th>
                            <th>{{ __('db.Qty') }}</th>
                            <th>{{ __('db.Unit Price') }}</th>
                            <th>{{ __('db.Tax') }}</th>
                            <th>{{ __('db.Discount') }}</th>
                            <th>{{ __('db.Subtotal') }}</th>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <div id="return-footer" class="modal-body"></div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script type="text/javascript">

        var all_permission = null;
        var return_id = [];
        var user_verified =