@extends('layouts.master')

    @section('content')

        <style>
            @font-face {
                font-family: 'Jameel Noori Nastaleeq';
                src: url('path/to/JameelNooriNastaleeq.woff') format('woff'),
                    url('path/to/JameelNooriNastaleeq.ttf') format('truetype');
            }

            .az-content-label-ur {
                font-family: 'Jameel Noori Nastaleeq', serif;
                font-size: 2vh;

                /* margin-bottom: 15px; */
                line-height: 2;
            }

            .urdu-font {
                font-size: 17px;
            }
        </style>
        <!-- Breadcrumb and Page Title -->
        <div class="az-content-breadcrumb">
            <span> Purchase Order</span>
            <span>Add Purchase Order</span>
        </div>
        <h2 class="az-content-title" style="display: inline">Add New Purchase Order
            <span>
                <a href="{{ route('good_receipts.list') }}" class="btn border" style="float: right">
                    <i class="fa-solid fa-bars-staggered"></i> Back to List
                </a>
            </span>
        </h2>
        <div class="row">
            <div class="col-md-12 col-lg-12 col-xl-12">
                <div class="card card-body pd-40">
                    <h5 class="card-title mg-b-20">Add Purchase Order</h5>
                    <form method="POST" action="{{ route('po.update', Crypt::encrypt($po->id)) }}" id="goodReceiptsForm">
                        @csrf
                         @method('PUT')
                        <!-- Error Display -->
                        @if (count($errors) > 0)
                            <div class="p-1">
                                @foreach ($errors->all() as $error)
                                    <div class="alert alert-warning alert-danger fade show" role="alert">
                                        {{ $error }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Basic Details -->
                        <div class="row row-sm mg-b-20">
                            <div class="col-md-12">
                                <div class="card shadow-sm border-0 h-100">

                                    <!-- Card Header -->
                                    <div class="card-header   py-2">
                                        <h6 class="mb-0 urdu-font">
                                            Supplier Details
                                        </h6>
                                    </div>

                                    <div class="card-body">

                                        <!-- Select Supplier -->
                                        <div class="form-group mb-3 ">
                                            <label class="az-content-label urdu-font d-block ">
                                                Select Supplier
                                            </label>

                                            <div class="d-flex gap-2">
                                                <select class="form-control select2" style="width:85%;" name="suppliers"
                                                    id="suppliers" required>
                                                    <option value="">- Select -</option>
                                                    @foreach ($suppliers as $supplier)
                                                        <option
                                                            {{ old('id_supplier', $po->supplier_id ?? '') == $supplier->id_supplier ? 'selected' : '' }}
                                                            value="{{ $supplier->id_supplier }}">
                                                            {{ $supplier->supplier_name }} |
                                                            {{ $supplier->supplier_name_urdu }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <button type="button" class="btn btn-info btn-sm" data-toggle="modal"
                                                    data-target="#addSupplierModal">
                                                    + Add
                                                </button>
                                            </div>

                                            @error('suppliers')
                                                <span class="form-text text-danger"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>

                                        <hr class="my-3">

                                        <!-- Supplier Details -->
                                        <div id="supplierDetails" style="display:none;">
                                            <h6 class="text-dark fw-bold urdu-font mb-2">
                                                Supplier Details
                                            </h6>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p class="mb-1">
                                                        <strong>Name:</strong>
                                                        <span id="supName"></span>
                                                    </p>
                                                    <p class="mb-1">
                                                        <strong>Phone Number :</strong>
                                                        <span id="supPhone"></span>
                                                    </p>
                                                </div>

                                                <div class="col-md-6">
                                                    <p class="mb-1">
                                                        <strong>Address</strong>
                                                        <span id="supAddress"></span>
                                                    </p>
                                                    <p class="mb-1">
                                                        <strong>Email</strong>
                                                        <span id="supEmail"></span>
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

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


                        <!-- Details -->
                        <div class="row row-sm mg-b-20">

                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label class="az-content-label" for="order_date">Date</label>
                                    <input type="text" id="order_date" name="order_date" class=" date form-control"
                                        value="{{ $po->order_date }}" placeholder="dd/mm/yyyy" readonly />
                                </div>
                                @error('order_date')
                                    <span class="form-text text-danger"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="az-content-label " style="float: inline-end;">Details</label>
                                    <textarea class="form-control" name="details" id="details">{{ $po->notes }}</textarea>
                                </div>
                                @error('details')
                                    <span class="form-text text-danger"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Items Section -->
                        <hr class="my-5">
                        <div id="items-wrapper">
                            <h3>Select Items</h3>
                            @foreach ($po->purchaseDetails as $index => $detail)
                                <div class="row row-sm mg-b-20 shadow p-3 bg-light rounded"
                                    id="item-row-{{ $index }}">
                                    {{-- For Main Category --}}
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="az-content-label" for="productMainCate{{ $detail->id }}">
                                                Main Category
                                            </label>
                                            <select name="productMainCate[]" id="productMainCate{{ $detail->id }}"
                                                class="form-control item-select"
                                                data-parent-cate-id="{{ $detail->pro_cate_parent_id }}"
                                                data-child-cate-id="{{ $detail->pro_cate_child_id }}"
                                                onchange="checkForParentCate(this.value, {{ $detail->id }})">
                                                <option value="">Select Main Category</option>
                                                @foreach ($productCateMain as $key => $main)
                                                    <option value="{{ $main->id_pro_cate_main }}"
                                                        {{ $detail->pro_cate_main_id == $main->id_pro_cate_main ? 'selected' : '' }}>
                                                        {{ $main->products_category_name }} |
                                                        {{ $main->products_category_name_urdu }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('productMainCate')
                                            <span class="form-text text-danger"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>

                                    {{-- For Parent Category --}}