@extends('layouts.app')
@section('title', 'Customer Old Phone Buy (Buyback)')

@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <x-breadcrumb :langArray="[
                                    'purchase.purchase',
                                    'Old Phone Buy',
                                    'purchase.create',
                                ]"/>
        <div class="row">
            <form class="g-3 needs-validation" id="invoiceForm" action="{{ route('purchase.buyback.store') }}" enctype="multipart/form-data">
                {{-- CSRF Protection --}}
                @csrf
                @method('POST')

                <input type="hidden" name="row_count" value="0">
                <input type="hidden" name="row_count_payments" value="0">
                <input type="hidden" id="base_url" value="{{ url('/') }}">
                <input type="hidden" id="operation" name="operation" value="save">
                <input type="hidden" id="selectedPaymentTypesArray" value="{{ $selectedPaymentTypesArray }}">
                
                <div class="row">
                    <div class="col-12 col-lg-12">
                        <div class="card border-top border-0 border-4 border-primary">
                            <div class="card-header px-4 py-3">
                                <h5 class="mb-0 text-primary"><i class='bx bx-id-card me-2'></i>Customer KYC & Purchase Details</h5>
                            </div>
                            <div class="card-body p-4 row g-3">
                                    <div class="col-md-4">
                                        <x-label for="party_id" name="Customer (Seller)" />
                                        <div class="input-group">
                                            <select class="form-select party-ajax" data-party-type='customer' data-placeholder="Select Customer" id="party_id" name="party_id">
                                                <x-option-default-party-selected partyType='customer' />
                                            </select>
                                            <button type="button" class="input-group-text open-party-model" data-party-type='customer'>
                                                <i class='text-primary bx bx-plus-circle'></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <x-label for="purchase_date" name="{{ __('app.date') }}" />
                                        <div class="input-group mb-3">
                                            <x-input type="text" additionalClasses="datepicker" name="purchase_date" :required="true" value=""/>
                                            <span class="input-group-text" id="input-near-focus" role="button"><i class="fadeIn animated bx bx-calendar-alt"></i></span>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <x-label for="purchase_code" name="Buyback Code" />
                                        <div class="input-group mb-3">
                                            <x-input type="text" name="prefix_code" :required="true" placeholder="Prefix" value="BUY-"/>
                                            <span class="input-group-text">#</span>
                                            <x-input type="text" name="count_id" :required="true" placeholder="Serial" value="{{ $data['count_id'] }}"/>
                                        </div>
                                    </div>

                            </div>

                            <div class="card-header px-4 py-3">
                                <h5 class="mb-0">{{ __('item.items') }} (Bought Back)</h5>
                            </div>
                            <div class="card-body p-4 row g-3">
                                    <div class="col-md-3 col-sm-12 col-lg-3">
                                        <x-label for="warehouse_id" name="{{ __('warehouse.warehouse') }}" />
                                        <x-dropdown-warehouse selected="" dropdownName='warehouse_id' />
                                    </div>
                                    <div class="col-md-9 col-sm-12 col-lg-9">
                                        <x-label for="search_item" name="Search/Scan Phone Model" />
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon1"><i class="fadeIn animated bx bx-barcode-reader text-primary"></i></span>
                                            <input type="text" id="search_item" value="" class="form-control" required placeholder="Scan Barcode/Search Model">
                                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#itemModal"><i class="bx bx-plus-circle me-0"></i> Add New Model</button>
                                        </div>
                                        <small class="text-muted">Tip: Create items under 'Used Mobiles' category.</small>
                                    </div>
                                    
                                    <div class="col-md-12 table-responsive">
                                        <table class="table mb-0 table-striped table-bordered" id="invoiceItemsTable">
                                            <thead>
                                                <tr class="text-uppercase text-center bg-light">
                                                    <th scope="col" style="width:5%">{{ __('app.action') }}</th>
                                                    <th scope="col" style="width:30%">{{ __('item.item') }}</th>
                                                    <th scope="col" style="width:15%">IMEI / Serial</th>
                                                    <th scope="col" style="width:10%">{{ __('app.qty') }}</th>
                                                    <th scope="col" style="width:10%">Buy Price</th>
                                                    <th scope="col" style="width:10%">Condition</th>
                                                    <th scope="col" style="width:10%">{{ __('app.total') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="7" class="text-center fw-light fst-italic default-row">
                                                        No phones added for buyback yet!!
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr class="bg-light">
                                                    <td colspan="3" class="fw-bold text-end">Total Buy Quantity</td>
                                                    <td class="fw-bold sum_of_quantity text-center">0</td>
                                                    <td colspan="2" class="text-end fw-bold">Total Amount:</td>
                                                    <td class="fw-bold sum_of_total text-primary text-end">0.00</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>

                                    <div class="col-md-8">
                                        <x-label for="note" name="Purchase Note / Terms" />
                                        <x-textarea name='note' value='Customer confirms phone is not stolen and belongs to them.'/>
                                    </div>
                                    <div class="col-md-4 mt-4 text-end">
                                        <div class="p-3 border rounded bg-light">
                                            <h4 class="mb-0 text-primary">Grand Total: <span class="grand_total_html">0.00</span></h4>
                                            <input type="hidden" name="grand_total" class="grand_total" value="0">
                                            <input type="hidden" name="round_off" class="round_off" value="0">
                                        </div>
                                    </div>
                            </div>

                            <div class="card-header px-4 py-3">
                                <h5 class="mb-0">Payment to Customer</h5>
                            </div>
                            <div class="card-body p-4 row g-3 ">
                                <div class="payment-container">
                                    <div class="row payment-type-row-0 py-2">
                                        <div class="col-md-6">
                                            <x-label for="amount" name="Amount Paid" />
                                            <div class="input-group mb-3">
                                                <x-input type="text" additionalClasses="cu_numeric" name="payment_amount[0]" value=""/>
                                                <span class="input-group-text"><i class='bx bx-money'></i></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <x-label for="payment_type" name="Paid Via" />
                                            <div class="input-group">
                                                <select class="form-select select2 payment-type-ajax" name="payment_type_id[0]" data-placeholder="Select Payment Mode">
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer p-4">
                                <div class="d-md-flex d-grid align-items-center gap-3">
                                    <x-button type="button" class="btn btn-primary px-5" buttonId="submit_form" text="CONFIRM BUYBACK" />
                                    <x-anchor-tag href="{{ route('dashboard') }}" text="{{ __('app.close') }}" class="btn btn-light px-5" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

@include("modals.payment-type.create")
@include("modals.party.create")
@include("modals.item.create")

@endsection

@section('js')
<script src="{{ versionedAsset('custom/js/autocomplete-item.js') }}"></script>
<script src="{{ versionedAsset('custom/js/purchase/buyback-bill.js') }}"></script>
<script src="{{ versionedAsset('custom/js/common/common.js') }}"></script>
<script src="{{ versionedAsset('custom/js/modals/party/party.js') }}"></script>
<script src="{{ versionedAsset('custom/js/modals/item/item.js') }}"></script>
<script src="{{ versionedAsset('custom/js/payment-types/payment-type-select2-ajax.js') }}"></script>
<script>
    $(document).ready(function() {
        // Set condition to 'used' when item modal is opened from here
        $('[data-bs-target="#itemModal"]').on('click', function() {
            if ($('#itemForm input[name="condition"]').length == 0) {
                $('#itemForm').append('<input type="hidden" name="condition" value="used">');
            } else {
                $('#itemForm input[name="condition"]').val('used');
            }
        });

        // Custom logic for Buyback if any
        $('#invoiceForm').on('submit', function() {
            // Optional validation for KYC
            if($('input[name="cnic_no"]').val() == '') {
                // alert('Warning: CNIC Number is recommended for KYC.');
            }
        });
    });
</script>
@endsection