@php use App\Enums\Product\ProductTypeEnums; @endphp
@extends('administrator.layout.master')

@section('breadcrumb')
    @php
$breadcrumbItems = [
    ['label' => 'Order'],
    ['label' => 'Order Management', 'url' => route('administrator.pages.order.index')],
    ['label' => 'Add New Order', 'active' => true],
];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection

@section('content')
    @if(auth()->guard('admins')->user()->can("add order"))
        <form action="{{ route('administrator.pages.order.store') }}" method="post">
            @csrf
            <div class="row align-items-start">
                <div class="col-md-8">
                    <div class="card card-outline card-primary rounded-4 shadow-none">
                        <div class="card-header bg-white rounded-top-4">
                            <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#detail" role="tab" aria-controls="detail"
                                        aria-selected="true">Customer Information</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#product" role="tab" aria-controls="product"
                                        aria-selected="false">Product Service</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-four-tabContent">
                                <div class="tab-pane fade active show" id="detail" role="tabpanel" aria-labelledby="detail">
                                    <div class="form-group mb-3">
                                        <label for="customer_id">Client User</label>
                                        <select class="form-control" name="customer_id" id="customer_id" data-placeholder="Select Customer">
                                            <option value=""></option>
                                            @if($customer->count())
                                                @foreach($customer->all() as $item)
                                                    <option value="{{ $item->id }}">
                                                        {{ $item->firstname . ' ' . $item->lastname }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="payment_id">Payment Method</label>
                                        <select class="form-control" name="payment_id" id="payment_id" data-placeholder="Select Payment">
                                            <option value=""></option>
                                            @if($payment->count())
                                                @foreach($payment->all() as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="discount_id">Promotion Code</label>
                                        <select class="form-control" name="discount_id" id="discount_id" data-placeholder="Select Discount">
                                            <option value=""></option>
                                            @if($discount->count())
                                                @foreach($discount->all() as $item)
                                                    <option value="{{ $item->id }}">{{ $item->code }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="status">Orders Status</label>
                                        <select class="form-control" name="status" id="status">
                                            <option value="0">Pending</option>
                                            <option value="1">Active</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" name="create_invoice" id="create_invoice" class="form-check-input"
                                                value="1" checked>
                                            <label class="form-check-label" for="create_invoice">
                                                Create Invoice
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product">
                                    <div class="append-new__product mb-3">
                                        <div class="border rounded p-3 mb-3">
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label>Product Type (*)</label>
                                                    <select class="form-control order_product_type"
                                                        data-append="product[0][product_id]" name="product[0][type]" id="product_type">
                                                        <option value="">-----------</option>
                                                        @foreach(ProductTypeEnums::cases() as $type)
                                                            <option value="{{ $type->value }}">{{ $type->label() }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label>Product (*)</label>
                                                    <select class="form-control product_id" name="product[0][product_id]"
                                                        id="product_id">
                                                        <option value="">-----------</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label>Domain</label>
                                                    <input type="text" class="form-control" name="product[0][domain]" value="">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label>Billing Cycle (*)</label>
                                                    <select class="form-control" name="product[0][billing]">
                                                        <option value="0">Free</option>
                                                        <option value="1">One Time</option>
                                                        <option value="2" selected>Monthly</option>
                                                        <option value="3">Quarterly</option>
                                                        <option value="4">Semi-Annually</option>
                                                        <option value="5">Annually</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label>Quantity (*)</label>
                                                    <input type="number" class="form-control" name="product[0][quantity]" value="1" min="1">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label>Price Override</label>
                                                    <input type="number" class="form-control" name="product[0][price_custom]" value=""
                                                        min="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-outline-primary btn-add__newProduct">
                                        <i class="fas fa-plus"></i> Add new Product
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card card-outline card-primary rounded-4 shadow-none">
                            <div class="card-header bg-white rounded-top-4">
                            <h5 class="card-title m-0">Order Summary</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody class="append-element__js"></tbody>
                                <tfoot>
                                    <tr class="tax">
                                        <td>VAT @ 10.00%</td>
                                        <td class="text-end" id="tax_append">0đ</td>
                                    </tr>
                                    <tr class="total">
                                        <td><strong>Total</strong></td>
                                        <td class="text-end" id="total_append">0đ</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <x-fixed-action-bar>
                <x-button-crm type="button" variant="secondary" size="sm" icon="arrow-left"
                    route="administrator.pages.order.index">Cancel</x-button-crm>
                <x-button-crm type="submit" variant="primary" size="sm" icon="check-circle">Confirm Order</x-button-crm>
            </x-fixed-action-bar>
        </form>
    @else
        <div class="alert alert-danger alert-dismissible">
            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Order
                management department</h5>
        </div>
    @endif
@endsection

@push('custom-scripts')
    @foreach (config('assets.datatable.js') as $datatable)
        <script src="{{ asset($datatable) }}"></script>
    @endforeach
@endpush