@extends("newDashboard.index")

@section("css")
<link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
@endsection

<style>
    /* Spinner styles */
    .spinner {
        width: 5em;
        height: 5em;
        border: 0.5em solid rgba(0, 0, 0, 0.1);
        border-left-color: #8daf21;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 99999;
    }

    .spinner-layer {
        position: fixed;
        width: calc(100vw - 260px);
        height: calc(100vh - 70px);
        background: #f2edf3;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }

    /* Spinner animation */
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .CUSTOM-d-none {
        display: none
    }

    .page {
        max-width: 800px;
        margin: 0 auto;
        background: #fff;
        padding: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        position: relative;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 0;
    }

    .company-text {
        text-align: {{ App::isLocale('ar') ? 'right' : 'left' }};
    }

    .company-name-ar {
        font-size: 20px;
        font-weight: 700;
    }

    .company-name-en {
        font-size: 14px;
        color: #555;
    }

    .company-logo img {
        max-width: 185px;
        max-height: 100px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        margin: 12px 0;
    }

    .meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .bar {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    .bar .green {
        width: 20%;
        height: 5px;
        background: #8daf21;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
        margin-right: -1px;
    }

    .bar .blue {
        width: 70%;
        height: 5px;
        background: #001d75;
        clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 16px;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
    }

    th {
        background: #f2f2f2;
        font-weight: 700;
    }

    .totals-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .totals-table {
        width: 30%;
        border-collapse: collapse;
    }

    .total-row {
        font-weight: 700;
        background: #f9f9f9;
    }

    .footer {
        margin-top: 18px;
    }

    .footer .split {
        height: 10px;
        background: #1e3a72;
        position: relative;
    }

    .footer .split:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 110px;
        height: 10px;
        background: #8daf21;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    }

    .footer .green-band {
        height: 70px;
        background: linear-gradient(90deg, #8daf21, #c2e24e);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
    }

    .footer img {
        margin-top: 10px;
    }

    .print-actions {
        margin-top: 16px;
        text-align: center;
    }

    .customBack {
        margin-bottom: 16px;
        text-align: center;
    }

    .btn {
        display: inline-block;
        padding: 8px 16px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        text-decoration: none;
        color: #6c757d;
        cursor: pointer;
    }

    .btn:hover {
        background: #e9ecef;
    }

    @media print {
        body {
            background: #fff;
            padding: 0;
        }

        .page {
            box-shadow: none;
            margin: 0;
            max-width: 100%;
            padding: 16mm;
        }

        .print-actions,
        .customBack {
            display: none !important;
        }
    }
</style>

@section("main-content")
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-cards-variant menu-icon"></i>
            </span> {{__('messages.Purchasing System')}}
        </h3>
    </div>

    <div class="row">
        <div id="success_message"></div>
        <div class="buttons-container">
            <a class="btn btn-primary float-end" href="{{ route('purchases.create') }}">{{__('messages.Add purchase')}}</a>
        </div>
        <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
        <input type="hidden" id="user-index" value="{{ route('purchases.index') }}" />
        <input type="hidden" id="add-ajax-route" value="{{ route('user.add.data') }}" />
        <input type="hidden" id="update-ajax-route" value="{{ route('purchases.update') }}" />
        <input type="hidden" id="delete-ajax-route" value="{{ route('user.delete.data') }}" />

        <div class="table-responsive customscroll">
            <table class="table datatable text-center" id="table">
                <div class="container pb-2">
                    <div class="row gap-1 custom-padding-filter-tmp">
                        <div class="col-12 col-md-4 col-xl-3">
                            <label class="col-form-label">{{__('messages.date:')}}</label>
                            <div class="center-custom-width-filter-date">
                                <input type="text" id="config-demo" placeholder="{{__('messages.date from - to')}}" class="form-control" />
                            </div>
                        </div>

                        <div class="col-12 col-md-4 col-xl-3 customselectcss">
                            <div class="form-group mb-3 px-2">
                                <label class="col-form-label">{{__('messages.Suppliers')}}:</label>
                                <select id="supplierSelect" class="js-example-disabled-results form-control">
                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Suppliers')]) }}</option>
                                    @foreach($suppliersFilter as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-12 col-md-4 col-xl-3 customselectcss">
                            <div class="form-group mb-3 px-2">
                                <label class="col-form-label">{{__('messages.Shipping type')}}:</label>
                                <select id="ShippingSelect" class="js-example-disabled-results form-control">
                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Shipping type')]) }}</option>
                                    <option value="land">{{__('messages.land')}}</option>
                                    <option value="air">{{__('messages.air')}}</option>
                                    <option value="sea">{{__('messages.sea')}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <thead>
                    <tr>
                        <th>{{__('messages.ID')}}</th> 
                        <th>{{__('messages.Serial number')}}</th>
                        <th>{{__('messages.Status')}}</th>
                        <th>{{__('messages.Owner status')}}</th>
                        <th>{{__('messages.Shipping type')}}</th>
                        <th>{{__('messages.Total price')}}</th>
                        <th>{{__('messages.Shipping price')}}</th>
                        <th>{{__('messages.Date')}}</th>
                        <th>{{__('messages.User Name')}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- edit Modal --}}
<div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">{{__('messages.Update Purchase Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row">
                <ul id="update_msgList"></ul>
                <input type="hidden" id="id" />
                <input type="hidden" id="user_id" value=""/>
                <input type="hidden" id="purchase-id">
                <input type="hidden" id="edit-ajax-route" value="{{ route('purchase.edit.data') }}" />

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mx-auto">
                            <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab" role="tablist">
                                <li class="nav-item"><a class="nav-link active" id="pills-purchase-tab" data-bs-toggle="pill" href="#pills-purchase" role="tab" aria-controls="pills-home" aria-selected="true">{{__('messages.Purchase data')}}</a></li>
                                <li class="nav-item"><a class="nav-link" id="pills-items-tab" data-bs-toggle="pill" href="#pills-items" role="tab" aria-controls="pills-contact" aria-selected="false">{{__('messages.Items')}}</a></li>
                                <li class="nav-item"><a class="nav-link" id="pills-Files-tab" data-bs-toggle="pill" href="#pills-Files" role="tab" aria-controls="pills-Files" aria-selected="false">{{__('messages.Purchase files')}}</a></li>
                            </ul>

                            <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-purchase" role="tabpanel" aria-labelledby="pills-purchase">
                                    <div class="row">
                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Serial number')}}</label>
                                            <input type="text" id="edit-serial-number" required class="form-control">
                                        </div>
                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Status')}}</label>
                                            <select id="edit-status" class="form-control">
                                                <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Status')]) }}</option>
                                                <option value="pending">Pending</option>
                                                <option value="estimated_cost">Estimated cost</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Shipping type')}}</label>
                                            <select id="edit-shipping-type" class="form-control">
                                                <option value="0">{{ __('validation.Select', ['attribute' => __('messages.shipping')]) }}</option>
                                                <option value="land">{{__('messages.land')}}</option>
                                                <option value="air">{{__('messages.air')}}</option>
                                                <option value="sea">{{__('messages.sea')}}</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Customs expenses')}}</label>
                                            <input type="number" id="edit-customs" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Clearance expenses')}}</label>
                                            <input type="number" id="edit-clearance" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Tax expenses')}}</label>
                                            <input type="number" id="edit-tax" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Shipping price')}}</label>
                                            <input type="number" id="edit-shipping-price" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Unloading workers expenses')}}</label>
                                            <input type="number" id="edit-workersExpenses" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Subtotal')}}</label>
                                            <input id="edit-subtotal" class="form-control" type="text" readonly min="0">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Discount Type')}}</label>
                                            <select id="edit-discount-type" class="form-control">
                                                <option value="0" selected>{{__('messages.Select an Option')}}</option>
                                                <option value="fixed">{{__('messages.Fixed')}}</option>
                                                <option value="percentage">{{__('messages.Percentage')}}</option>
                                            </select>
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Discount Amount')}}</label>
                                            <input id="edit-discount-amount" class="form-control" type="number" disabled min="0">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Total price')}}</label>
                                            <input type="text" readonly id="edit-total-price" required class="form-control">
                                        </div>

                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Date')}}</label>
                                            <input type="text" readonly id="edit-created-at" required class="form-control">
                                        </div>

                                        @permission('purchasing-pending')
                                        <div class="form-group mb-3 col-md-6">
                                            <label for="">{{__('messages.Owner status')}}</label>
                                            <select id="edit-owner-status" class="form-control">
                                                <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Status')]) }}</option>
                                                <option value="approve">{{__('messages.Approve')}}</option>
                                                <option value="reject">{{__('messages.Reject')}}</option>
                                            </select>
                                        </div>
                                        @endpermission
                                    </div>
                                </div>

                                <!-- Tab for Items -->
                                <div class="tab-pane fade" id="pills-items" role="tabpanel" aria-labelledby="pills-items">
                                    <h4 class="card-title">{{__('messages.Items')}}</h4>

                                    <div class="custoTable" style="overflow: hidden;">
                                        <div class="table_responsive">
                                            <table id="edit-myTableItems">
                                                <thead>
                                                    <tr>
                                                        <th>{{__('messages.Item')}}</th>
                                                        <th>{{__('messages.Suppliers')}}</th>
                                                        <th>{{__('messages.Inventory')}}</th>
                                                        <th>{{__('messages.quantity')}}</th>
                                                        <th>{{__('messages.meat weight')}}</th>
                                                        <th>{{__('messages.price')}}</th>
                                                        <th>{{__('messages.production date')}}</th>
                                                        <th>{{__('messages.expire date')}}</th>
                                                        <th>{{__('messages.Action')}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tab for Files -->
                                <div class="tab-pane fade" id="pills-Files" role="tabpanel" aria-labelledby="pills-Files">
                                    <input type="hidden" id="delete-image-route" value="{{ route('purchases.image') }}" />
                                    <div class="custoTable">
                                        <div class="table_responsive">
                                            <table id="edit-myTableFile">
                                                <thead>
                                                    <tr>
                                                        <th>{{__('messages.ID')}}</th>
                                                        <th>{{__('messages.Files')}}</th>
                                                        <th>{{__('messages.Action')}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Upload Files Tab -->
                                <div class="tab-pane fade" id="pills-add-Files" role="tabpanel" aria-labelledby="pills-add-Files">
                                    <div class="containerDragDop">
                                        <div class="header-section">
                                            <h1>{{__('messages.upload files')}}</h1>
                                            <p>{{__('messages.Upload files you want to share with your team members')}}</p>
                                            <p>{{__('messages.PDF, Images & Videos are allowed')}}</p>
                                        </div>
                                        <div class="drop-section-customcss drop-section-edit">
                                            <div class="col">
                                                <div class="cloud-icon">
                                                    <img src="/metronic/images/iconsDragAndDrop/cloud.png" alt="cloud">
                                                </div>
                                                <span>{{__('messages.Drag & Drop your files here')}}</span>
                                                <span>{{__('messages.OR')}}</span>
                                                <button class="file-selector-edit">{{__('messages.Browse Files')}}</button>
                                                <input name="files" type="file" id="FileList" class="file-selector-input-edit" multiple>
                                            </div>
                                            <div class="col">
                                                <div class="drop-here">{{__('messages.Drop Here')}}</div>
                                            </div>
                                        </div>
                                        <div class="list-section-customcss list-section-edit">
                                            <div class="list-title">{{__('messages.Uploaded Files')}}</div>
                                            <div class="list-edit" id="FileList"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                    @permission('purchasing-pending')
                    <button type="submit" class="btn btn-primary update">{{__('messages.Update')}}</button>
                    @endpermission
                </div>
            </div>
        </div>
    </div>
</div>

<div class="spinner-layer d-none">
    <div class="spinner"></div>
    <p class="fs-3">{{__('messages.Processing')}}</p>
</div>

@endsection

@section("scripts")
   <script>
        var translations = {
            'ID': '{{ __("messages.ID") }}',
            'Serial number': '{{ __("messages.Serial number") }}',
            'Status': '{{ __("messages.Status") }}',
            'Owner status': '{{ __("messages.Owner status") }}',
            'Shipping type': '{{ __("messages.Shipping type") }}',
            'Total price': '{{ __("messages.Total price") }}',
            'Tax expenses': '{{ __("messages.Tax expenses") }}',
            'Shipping price': '{{ __("messages.Shipping price") }}',
            'Date': '{{ __("messages.Date") }}',
            'Purchasing System': '{{ __("messages.Purchasing System") }}',
            'Purchase # ': '{{ __("messages.Purchase # ") }}',
            'Owner status approve statement': '{{ __("messages.has been accepted by the administration. Please process it") }}',
            'Owner status reject statement': '{{ __("messages.has been rejected by the administration") }}',
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="module" src="{{asset('metronic/js/pages/purchases.js')}}"></script> 
    <script src="{{asset('metronic/js/components/uploadFiles.js')}}"></script> 
@endsection