@extends('layouts.app')
@section('title', __('app.sale_invoice_wizard'))
@section('content')
<div class="page-head">
    <div>
        <h1><i class="fa-solid fa-file-invoice-dollar"></i> {{ __('app.sale_invoice_wizard') }}</h1>
        <p>{{ __('app.sale_wizard_hint') }}</p>
    </div>
    <div class="actions">
        <a class="btn secondary" href="{{ route('sales.simple.create') }}"><i class="fa-solid fa-basket-shopping"></i> {{ __('app.retail_invoice') }}</a>
        <a class="btn secondary" href="{{ route('sales.index') }}"><i class="fa-solid fa-list"></i> {{ __('app.sale_invoice_list') }}</a>
        <a class="btn secondary" href="{{ route('mobiles.index', ['stock_status' => 'available']) }}"><i class="fa-solid fa-boxes-stacked"></i> {{ __('app.available_stock') }}</a>
    </div>
</div>

<form class="panel animated-panel no-print" method="get" action="{{ route('wizard.sale') }}">
    <div class="live-search-box sale-search-top">
        <div data-mdb-input-init class="form-outline">
            <input class="form-control" name="q" placeholder=" " value="{{ request('q') }}">
            <label class="form-label"><i class="fa-solid fa-magnifying-glass"></i> {{ __('app.search_imei_before_sale') }}</label>
        </div>
        <button class="btn secondary"><i class="fa-solid fa-magnifying-glass"></i> {{ __('app.search') }}</button>
        <a class="btn secondary" href="{{ route('wizard.sale') }}"><i class="fa-solid fa-rotate-right"></i> {{ __('app.reset') }}</a>
        <span class="selected-counter"><i class="fa-solid fa-box"></i> {{ $mobiles->count() }} {{ __('app.records') }}</span>
    </div>
</form>

<form class="panel wizard form-grid animated-panel" method="post" action="{{ route('sales.store') }}" data-wizard-form data-sale-wizard>
@csrf
<input type="hidden" name="invoice_entry_mode" value="wizard">
<div class="wizard-steps five wide" data-wizard-steps>
    <div class="wizard-step active" data-step-index="0"><span>1</span>{{ __('app.customer') }}</div>
    <div class="wizard-step locked" data-step-index="1"><span>2</span>{{ __('app.search') }}</div>
    <div class="wizard-step locked" data-step-index="2"><span>3</span>{{ __('app.choose_mobiles') }}</div>
    <div class="wizard-step locked" data-step-index="3"><span>4</span>{{ __('app.payment') }}</div>
    <div class="wizard-step locked" data-step-index="4"><span>5</span>{{ __('app.finish') }}</div>
</div>

<div class="wizard-panel active wide form-grid" data-step="0" data-step-title="{{ __('app.customer') }}">
    <div class="section-title wide"><i class="fa-solid fa-user"></i> {{ __('app.customer') }} / {{ __('app.invoice') }}</div>
    <div class="panel-note wide"><i class="fa-solid fa-lock"></i> {{ __('app.wizard_required_step_hint') }}</div>
    <div class="form-outline wide">
        <select class="form-control" name="customer_id" required data-placeholder="{{ __('app.search_customer_phone_tazkira') }}">
            <option value="">---</option>
            @foreach($customers as $c)
                <option value="{{ $c->id }}" @selected(old('customer_id')==$c->id)>{{ $c->name }} - {{ $c->phone }} - {{ $c->tazkira }}</option>
            @endforeach
        </select>
        <label class="form-label">{{ __('app.customer') }}</label>
    </div>
    <div data-mdb-input-init class="form-outline">
        <input class="form-control" type="date" name="sale_date" placeholder=" " value="{{ old('sale_date',date('Y-m-d')) }}" required data-gregorian-date data-shamsi-target="#wizard_shamsi_date">
        <label class="form-label">{{ __('app.gregorian_date') }}</label>
    </div>
    <div data-mdb-input-init class="form-outline">
        <input class="form-control" id="wizard_shamsi_date" name="sale_date_shamsi_view" placeholder=" " value="{{ old('sale_date_shamsi_view', \App\Support\ShopCode::gregorianToJalaliDate(date('Y-m-d'))) }}" readonly data-shamsi-date>
        <label class="form-label">{{ __('app.shamsi_date') }}</label>
    </div>
    <div class="form-outline">
        <select class="form-control" name="currency" required data-placeholder="{{ __('app.search_currency') }}">
            @foreach($currencies as $currency)
                <option value="{{ $currency->code }}" data-rate="{{ $currency->exchange_rate }}" @selected(old('currency', $currency->is_default ? $currency->code : null)===$currency->code)>{{ $currency->code }} - {{ $currency->name }}</option>
            @endforeach
        </select>
        <label class="form-label">{{ __('app.currency') }}</label>
    </div>
    <div data-mdb-input-init class="form-outline">
        <input class="form-control" type="number" step="0.0001" name="exchange_rate" placeholder=" " value="{{ old('exchange_rate',1) }}" required>
        <label class="form-label">{{ __('app.exchange_rate') }}</label>
    </div>
    <div class="wizard-actions wide"><span></span><button type="button" class="btn" data-wizard-next><i class="fa-solid fa-arrow-right"></i> {{ __('app.next') }}</button></div>
</div>

<div class="wizard-panel wide" data-step="1" data-step-title="{{ __('app.search') }}">
    <div class="section-title"><i class="fa-solid fa-magnifying-glass"></i> {{ __('app.mobile_search_engine') }}</div>
    <div class="panel-note"><i class="fa-solid fa-circle-info"></i> {{ __('app.invoice_item_search_hint') }}</div>
    <div class="live-search-box invoice-search-engine">
        <div data-mdb-input-init class="form-outline">
            <input class="form-control" type="search" data-sale-item-search placeholder=" ">
            <label class="form-label">{{ __('app.search_by_imei_brand_model') }}</label>
        </div>
        <div class="form-outline">
            <select class="form-control" data-sale-brand-filter data-no-select2>
                <option value="">{{ __('app.all_brands') }}</option>
                @foreach($mobiles->pluck('brand.name')->filter()->unique()->sort() as $brandName)
                    <option value="{{ strtolower($brandName) }}">{{ $brandName }}</option>
                @endforeach
            </select>
            <label class="form-label">{{ __('app.brand') }}</label>
        </div>
        <div class="form-outline">
            <select class="form-control" data-sale-condition-filter data-no-select2>
                <option value="">{{ __('app.condition') }}</option>
                <option value="new">{{ __('app.new') }}</option>
                <option value="used">{{ __('app.used') }}</option>
            </select>
            <label class="form-label">{{ __('app.condition') }}</label>
        </div>
        <div class="form-outline">
            <select class="form-control" data-sale-source-filter data-no-select2>
                <option value="">{{ __('app.source') }}</option>
                <option value="supplier">{{ __('app.supplier') }}</option>
                <option value="local_customer">{{ __('app.local_customer') }}</option>
                <option value="import">{{ __('app.import') }}</option>
            </select>
            <label class="form-label">{{ __('app.source') }}</label>
        </div>
    </div>
    <div class="selection-toolbar">
        <span class="selected-counter" data-selected-counter>0 {{ __('app.selected') }}</span>
        <span class="selected-counter muted" data-result-counter>{{ $mobiles->count() }} {{ __('app.records') }}</span>
        <button class="btn secondary" type="button" data-select-visible><i class="fa-solid fa-check-double"></i> {{ __('app.select_visible') }}</button>
        <button class="btn secondary" type="button" data-clear-selection><i class="fa-solid fa-eraser"></i> {{ __('app.clear_selection') }}</button>
    </div>
    <div class="wizard-actions"><button type="button" class="btn secondary" data-wizard-prev><i class="fa-solid fa-arrow-left"></i> {{ __('app.previous') }}</button><button type="button" class="btn" data-wizard-next><i class="fa-solid fa-arrow-right"></i> {{ __('app.next') }}</button></div>
</div>

<div class="wizard-panel wide" data-step="2" data-step-title="{{ __('app.choose_mobiles') }}" data-requires-selection>
    <div class="section-title"><i class="fa-solid fa-mobile-screen-button"></i> {{ __('app.choose_mobiles') }}</div>
    <div class="table-wrap sale-item-table-wrap">
        <table class="sale-item-table">
            <thead>
                <tr><th></th><th>IMEI</th><th>{{ __('app.mobile') }}</th><th>{{ __('app.condition') }}</th><th>{{ __('app.source') }}</th><th>{{ __('app.cost') }}</th><th>{{ __('app.sale_price') }}</th></tr>
            </thead>
            <tbody>
            @forelse($mobiles as $m)
                @php
                    $brandName = strtolower($m->brand->name ?? '');
                    $modelName = strtolower($m->model->name ?? '');
                    $searchText = strtolower($m->imei_1.' '.$m->imei_2.' '.$m->serial_number.' '.$m->title().' '.$m->condition_status.' '.$m->source_type.' '.$m->storage.' '.$m->ram.' '.$m->color);
                    $checked = in_array($m->id, old('mobile_ids', $preselectedMobileIds ?? []));
                @endphp
                <tr class="sale-item-row {{ $checked ? 'selected-row' : '' }}" data-id="{{ $m->id }}" data-search="{{ $searchText }}" data-brand="{{ $brandName }}" data-model="{{ $modelName }}" data-condition="{{ $m->condition_status }}" data-source="{{ $m->source_type }}">
                    <td><input class="sale-item-check" type="checkbox" name="mobile_ids[]" value="{{ $m->id }}" @checked($checked)></td>
                    <td><strong>{{ $m->imei_1 }}</strong><small>{{ $m->imei_2 ?: $m->serial_number }}</small></td>
                    <td><b>{{ $m->title() }}</b><small>{{ $m->storage }} {{ $m->ram }} {{ $m->color }}</small></td>
                    <td><span class="badge blue">{{ __('app.'.$m->condition_status) }}</span></td>
                    <td><span class="badge">{{ __('app.'.$m->source_type) }}</span></td>
                    <td>{{ number_format($m->total_cost,2) }}</td>
                    <td><input class="sale-price-input" type="number" step="0.01" name="sale_prices[{{ $m->id }}]" value="{{ old('sale_prices.'.$m->id, $m->sale_price) }}" data-mobile-id="{{ $m->id }}" data-cost="{{ $m->total_cost }}"></td>
                </tr>
            @empty
                <tr><td colspan="7" class="empty-state">{{ __('app.no_records') }}</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="invoice-preview mini-cards wide">
        <div class="mini-card"><b>{{ __('app.subtotal') }}</b><strong data-invoice-subtotal>0.00</strong></div>
        <div class="mini-card"><b>{{ __('app.selected') }}</b><strong data-invoice-selected>0</strong></div>
        <div class="mini-card"><b>{{ __('app.due') }}</b><strong data-invoice-due>0.00</strong></div>
    </div>
    <div class="wizard-actions"><button type="button" class="btn secondary" data-wizard-prev><i class="fa-solid fa-arrow-left"></i> {{ __('app.previous') }}</button><button type="button" class="btn" data-wizard-next><i class="fa-solid fa-arrow-right"></i> {{ __('app.next') }}</button></div>
</div>

<div class="wizard-panel wide form-grid" data-step="3" data-step-title="{{ __('app.payment') }}">
    <div class="section-title wide"><i class="fa-solid fa-money-bill-wave"></i> {{ __('app.payment_information') }}</div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" type="number" step="0.01" name="discount" data-invoice-discount placeholder=" " value="{{ old('discount',0) }}"><label class="form-label">{{ __('app.discount') }}</label></div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" type="number" step="0.01" name="paid" data-invoice-paid placeholder=" " value="{{ old('paid',0) }}"><label class="form-label">{{ __('app.paid') }}</label></div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" type="number" name="warranty_days" placeholder=" " value="{{ old('warranty_days',0) }}"><label class="form-label">{{ __('app.warranty_days') }}</label></div>
    <div class="summary-box wide">
        <div><span>{{ __('app.subtotal') }}</span><b data-invoice-subtotal>0.00</b></div>
        <div><span>{{ __('app.discount') }}</span><b data-invoice-discount-view>0.00</b></div>
        <div><span>{{ __('app.total') }}</span><b data-invoice-total>0.00</b></div>
        <div><span>{{ __('app.due') }}</span><b data-invoice-due>0.00</b></div>
    </div>
    <div class="wizard-actions wide"><button type="button" class="btn secondary" data-wizard-prev><i class="fa-solid fa-arrow-left"></i> {{ __('app.previous') }}</button><button type="button" class="btn" data-wizard-next><i class="fa-solid fa-arrow-right"></i> {{ __('app.next') }}</button></div>
</div>

<div class="wizard-panel wide form-grid" data-step="4" data-step-title="{{ __('app.finish') }}">
    <div class="section-title wide"><i class="fa-solid fa-check-circle"></i> {{ __('app.finish') }}</div>
    <div class="panel-note wide"><i class="fa-solid fa-circle-check"></i> {{ __('app.review_before_save') }}</div>
    <div data-mdb-input-init class="form-outline wide"><textarea class="form-control" name="notes" placeholder=" ">{{ old('notes') }}</textarea><label class="form-label">{{ __('app.notes') }}</label></div>
    <div class="wizard-actions wide"><button type="button" class="btn secondary" data-wizard-prev><i class="fa-solid fa-arrow-left"></i> {{ __('app.previous') }}</button><button data-mdb-ripple-init class="btn pulse-soft"><i class="fa-solid fa-file-invoice-dollar"></i> {{ __('app.create_invoice') }}</button></div>
</div>
</form>
@endsection