@extends('core::dashboard.layouts.master')
@section('title', 'NVO Vendor Contarcts')

@section('content')

    <style>
        .contractviewBtn {
            margin: 0.25rem 0px;
        }

        .new_nvocc_contract_button {
            text-transform: uppercase;
        }
    </style>

    <div class="loading-bar" id="loadingBar" style="display: none;">
        <div class="loading-bar--progress">
            <span class="first"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span class="last"></span>
        </div>
    </div>


    {{-- start Load Contract Data --}}
    <div class="global_container_settings">
        <div class="card global_settings">
            <div class="card-header dot_border d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0" style="font-weight: 550;">NVO Vendor Contracts</h4>
                <button type="button" class="btn btn-primary bg-gradient ms-1 new_nvocc_contract_button"
                    id="nvoccCreateModal">
                    <iconify-icon icon="mdi:plus-box" class="align-middle iconify_plus_size"></iconify-icon>
                    {{ transText('new_nvocc_contract_button') }}
                </button>

            </div>

            <div class="card-body">
                <div id="Contractloadform" class="form-horizontal" style="margin-bottom:15px">
                    <div class="row pt-1 align-items-start" style="flex-wrap: nowrap; overflow-x: auto;">

                        <!-- From Date -->
                        <div class="col-auto pe-0 form-field-gap" style="position: relative;">
                            <label for="date_range_from" class="form-label"
                                style="margin-bottom: 4px; display: block; white-space: nowrap;">
                                From:
                            </label>
                            <div style="position: relative; min-width: 320px; width: 320px;">
                                <input type="text" name="date_range_from" id="date_range_from"
                                    class="form-control contractFirstDate"
                                    style="padding-right: 30px; width: 100%; box-sizing: border-box;" />
                                <span class="input-group-text"
                                    style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                           width: auto!important; pointer-events: none; color: #6c757d;">
                                    <i class="ti ti-calendar" style="font-size: 1rem;"></i>
                                </span>
                            </div>
                        </div>

                        <!-- To Date -->
                        <div class="col-auto pe-0 form-field-gap" style="position: relative;">
                            <label for="date_range_to" class="form-label"
                                style="margin-bottom: 4px; display: block; white-space: nowrap;">
                                To:
                            </label>
                            <div style="position: relative; min-width: 320px; width: 320px;">
                                <input type="text" name="date_range_to" id="date_range_to"
                                    class="form-control contractLastDate"
                                    style="padding-right: 30px; width: 100%; box-sizing: border-box;" />
                                <span class="input-group-text"
                                    style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                           width: auto!important; pointer-events: none; color: #6c757d;">
                                    <i class="ti ti-calendar" style="font-size: 1rem;"></i>
                                </span>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="stock_status" class="form-label"
                                style="margin-bottom: 4px; display: block; white-space: nowrap;">
                                Status:
                            </label>
                            <select class="form-select contract_status" name="stock_status" id="stock_status"
                                style="min-width: 320px;">
                                <option value="A">Active</option>
                                <option value="D">Deleted</option>
                                <option value="N">Canceled</option>
                                <option value="All" selected>All</option>
                            </select>
                        </div>

                        <!-- Buttons -->
                        <div class="col-auto ms-auto d-flex align-items-center"
                            style="gap: 6px; min-width: 200px; padding-top: 15px;">

                            <!-- Excel -->
                            <button type="button" class="btn btn-success bg-gradient p-1 flex-fill"
                                style="min-width: 40px; max-width: 45px;" title="Export to Excel">
                                <i class="fas fa-file-excel"></i>
                            </button>

                            <!-- PDF -->
                            <button type="button" class="btn btn-danger bg-gradient p-1 flex-fill"
                                style="min-width: 40px; max-width: 45px;" title="Export to PDF">
                                <i class="fas fa-file-pdf"></i>
                            </button>

                            <!-- LOAD Button -->
                            <button type="submit" class="btn btn-primary bg-gradient p-1" id="contactLoadBtn"
                                style="min-width: 77px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 27px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2">
                                        <path stroke-dasharray="32" stroke-dashoffset="32"
                                            d="M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s"
                                                values="32;0"></animate>
                                            <set fill="freeze" attributeName="stroke-dasharray" begin="0.8s"
                                                to="2 4"></set>
                                        </path>
                                        <path stroke-dasharray="32" stroke-dashoffset="32"
                                            d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s"
                                                dur="0.4s" values="32;0"></animate>
                                        </path>
                                        <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s"
                                                dur="0.2s" values="10;0"></animate>
                                        </path>
                                        <path stroke-dasharray="6" stroke-dashoffset="6"
                                            d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="1s"
                                                dur="0.2s" values="6;0"></animate>
                                        </path>
                                    </g>
                                </svg>
                                LOAD
                            </button>
                        </div>
                    </div>
                </div>



                <div class="mb-0" id="hbl_content_div">
                    <div class="p-4 shadow rounded text-left contarct_head_message"
                        style="background: #FCFCFC; border: 1.5px solid #d9d9d9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);">
                        <h5 class="text-muted mb-0">📄 {{ transText('data_load_msg') }}...!</h5>
                    </div>
                </div>


                <div class="table-responsive listTable ics_ens_tb display_none contarctmainTable" style="">
                    <table class="table table-striped list_table">
                        <thead class="text-center">
                            <tr>
                                <th class="" style="width: 40px;">-</th>
                                <th class="" style="width: 136px;">Contract Number</th>
                                <th class="" style="width: 138px;">Party Type</th>
                                <th style="width: 120px;">Party Code</th>
                                <th style="width: 40px;">Valid From</th>
                                <th style="width: 40px;">Valid To</th>
                                <th style="width: 90px;">Party Address</th>
                                {{-- <th style="width: 40px;">Contract Items</th> --}}
                                <th class="sticky-col-last-1" style="width: 20px;">-</th>
                                <th class="sticky-col-last-1" style="width: 20px;">-</th>
                            </tr>
                        </thead>
                        <tbody id="dataBody" class="contractDataBody">
                            {{-- @foreach ($contracts as $index => $contract)
                                <tr>
                                    <td class="text-center sticky sticky-col-1" style="left: 40px;">{{ $index + 1 }}
                                    </td>
                                    <td class="text-center sticky sticky-col-5" style="left: 404px;">
                                        {{ $contract->contract_number }}</td>
                                    </td>

                                    <td class="text-center sticky sticky-col-6" style="left: 444px;">
                                        {{ $contract->party_type ? strtoupper($contract->party_type) : '' }}

                                    </td>
                                    <td class="text-center sticky sticky-col-6" style="left: 444px;">
                                        {{ $contract->party_code }}
                                    </td>
                                    <td class="text-center sticky sticky-col-6" style="left: 444px;">
                                        {{ $contract->valid_from ? date('Y-m-d', strtotime($contract->valid_from)) : '' }}
                                    </td>
                                    <td class="text-center sticky sticky-col-6" style="left: 444px;">
                                        {{ $contract->valid_to ? date('Y-m-d', strtotime($contract->valid_to)) : '' }}
                                    </td>
                                    <td class="text-center sticky sticky-col-6" style="left: 444px;">
                                        {{ $contract->party_full_address }}
                                    </td>


                                    <td class="text-center" style="left: 294px;">
                                        <button type="button" data-id="{{ $contract->row_id }}"
                                            class="btn btn-sm bg-gradient btn-info contracteditBtn">
                                            <i class="fas fa-pen"></i>
                                        </button>
                                    </td>


                                    <td class="text-center sticky-col-last-1" style="right: 0px;">
                                        <button type="button" class="btn btn-sm bg-gradient btn-danger contractdeleteBtn"
                                            data-id="{{ $contract->row_id }}">
                                            <i class="fas fa-trash" title="Delete"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach --}}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- end col -->
    </div>
    {{-- end Load Contract Data --}}

    {{-- ICS ENS Modal --}}
    @include('nvocc::contract.modal.create')

    {{-- Customer Modal --}}
    {{-- @include('customsfiling::euens.customer_modal') --}}

@endsection