@extends('layouts.app')

@section('title', 'Product Unit Update')

@section('content')

    <!-- [ page-header ] start -->
    <form id="updateProductUnitForm" method="POST" action="{{ route('productUnit.update', $productUnit->id) }}"
        enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">Product Unit</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item">{{ isset($productUnit) ? 'Edit' : 'Create' }} Unit</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex d-md-none">
                        <a href="javascript:void(0)" class="page-header-right-close-toggle">
                            <i class="feather-arrow-left me-2"></i>
                            <span>Back</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                        <a href="javascript:void(0);" class="btn btn-light-brand successAlertMessage">
                            <i class="feather-layers me-2"></i>
                            <span>Save as Draft</span>
                        </a>
                        <a href="javascript:void(0);" class="btn btn-primary successAlertMessage"
                            onclick="document.getElementById('updateProductUnitForm').submit();">
                            <i class="feather-user-plus me-2"></i>
                            <span>Update Product Unit</span>
                        </a>
                    </div>
                </div>
                <div class="d-md-none d-flex align-items-center">
                    <a href="javascript:void(0)" class="page-header-right-open-toggle">
                        <i class="feather-align-right fs-20"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- [ page-header ] end -->
        <!-- [ Main Content ] start -->
        <div class="main-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card border-top-0">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="profileTab" role="tabpanel">
                                <div class="card-body personal-info">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0 me-4">
                                            <span class="d-block mb-2">Product Unit Information:</span>
                                        </h5>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="unitNameInput" class="fw-semibold">Product Unit
                                                    Name:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-tag"></i></div>
                                                    <input type="text" class="form-control"
                                                        value="{{ old('unit_name', $productUnit->name ?? '') }}"
                                                        name="unit_name" id="unitNameInput" placeholder="Product Unit Name">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold" for="unit_type">Unit Type:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="unit_type" id="unit-type-dropdown"
                                                    required>
                                                    <option value="">Select Unit Type</option>
                                                    <option value="Piece"
                                                        {{ old('unit_type', $productUnit->unit_type) == 'Piece' ? 'selected' : '' }}>
                                                        Piece</option>
                                                    <option value="Kg"
                                                        {{ old('unit_type', $productUnit->unit_type) == 'Kg' ? 'selected' : '' }}>
                                                        Kg</option>
                                                    <option value="Liter"
                                                        {{ old('unit_type', $productUnit->unit_type) == 'Liter' ? 'selected' : '' }}>
                                                        Liter</option>
                                                    <option value="Box"
                                                        {{ old('unit_type', $productUnit->unit_type) == 'Box' ? 'selected' : '' }}>
                                                        Box</option>
                                                    <option value="Meter"
                                                        {{ old('unit_type', $productUnit->unit_type) == 'Meter' ? 'selected' : '' }}>
                                                        Meter</option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Status: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="status" data-select2-selector="status">
                                                    <option value="active" data-bg="bg-success">
                                                        Active
                                                    </option>
                                                    <option value="inactive" data-bg="bg-warning">
                                                        Inactive
                                                    </option>
                                                    <option value="archived" data-bg="bg-danger">
                                                        Declined
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="card stretch stretch-full">
                                                <div class="card-body p-0">
                                                    <div class="table-responsive">
                                                        <table class="table table-hover" id="customerList">
                                                            <thead>
                                                                <tr>
                                                                    <th class="wd-30">
                                                                        <div class="btn-group mb-1">
                                                                            <div
                                                                                class="custom-control custom-checkbox ms-1">
                                                                                <input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="checkAllCustomer">
                                                                                <label class="custom-control-label"
                                                                                    for="checkAllCustomer"></label>
                                                                            </div>
                                                                        </div>
                                                                    </th>
                                                                    <th>Name</th>
                                                                    <th>Type</th>
                                                                    <th>Date</th>
                                                                    <th>Status</th>
                                                                    <th class="text-end">Actions</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach ($ProductUnits as $productUnit)
                                                                    <tr class="single-item">
                                                                        <td>
                                                                            <div class="item-checkbox ms-1">
                                                                                <div
                                                                                    class="custom-control custom-checkbox">
                                                                                    <input type="checkbox"
                                                                                        class="custom-control-input checkbox"
                                                                                        id="checkBox_{{ $productUnit->id }}">
                                                                                    <label class="custom-control-label"
                                                                                        for="checkBox_{{ $productUnit->id }}"></label>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <a href="" class="hstack gap-3">
                                                                                <div>
                                                                                    <span
                                                                                        class="text-truncate-1-line">{{ $productUnit->name }}</span>
                                                                                </div>
                                                                            </a>
                                                                        </td>
                                                                        <td>{{ $productUnit->unit_type ?? 'Unknown' }}
                                                                        </td>
                                                                        <td>{{ $productUnit->created_at->format('Y-m-d, h:iA') }}
                                                                        </td>
                                                                        <td>
                                                                            <select class="form-control" name="status"
                                                                                data-select2-selector="status">
                                                                                <option value="active"
                                                                                    data-bg="bg-success">
                                                                                    Active
                                                                                </option>
                                                                                <option value="inactive"
                                                                                    data-bg="bg-warning">
                                                                                    Inactive
                                                                                </option>
                                                                                <option value="archived"
                                                                                    data-bg="bg-danger">
                                                                                    Declined
                                                                                </option>
                                                                            </select>
                                                                        </td>
                                                                        <td>
                                                                            <div class="hstack gap-2 justify-content-end">

                                                                                <div class="dropdown">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="avatar-text avatar-md"
                                                                                        data-bs-toggle="dropdown"
                                                                                        data-bs-offset="0,21">
                                                                                        <i
                                                                                            class="feather feather-more-horizontal"></i>
                                                                                    </a>
                                                                                    <ul class="dropdown-menu">
                                                                                        @can('update_products_unit')
                                                                                        <a class="dropdown-item"
                                                                                            href="{{ route('productUnit.edit') }}?id={{ $productUnit->id }}">
                                                                                            <i
                                                                                                class="feather feather-edit-3 me-3"></i><span>Edit</span>
                                                                                        </a>
                                                                                        @endcan

                                                                                        @can('delete_products_unit')
                                                                                        <li>
                                                                                            <a class="dropdown-item"
                                                                                                href=""><i
                                                                                                    class="feather feather-trash text-danger me-3"></i><span
                                                                                                    class="text-danger">Delete</span></a>
                                                                                        </li>
                                                                                        @endcan
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- [ Main Content ] end -->
@endsection
