@extends('layouts.app')

@section('title', 'Products')

@section('content')
    <!-- [ page-header ] start -->
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">Products</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('myactivities') }}">Home</a></li>
                <li class="breadcrumb-item">Products</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-icon btn-light-brand" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne">
                        <i class="feather-bar-chart"></i>
                    </a>
                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-filter"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-eye me-3"></i>
                                <span>All</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-users me-3"></i>
                                <span>Group</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-flag me-3"></i>
                                <span>Country</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-dollar-sign me-3"></i>
                                <span>Invoice</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-briefcase me-3"></i>
                                <span>Project</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-user-check me-3"></i>
                                <span>Active</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-user-minus me-3"></i>
                                <span>Inactive</span>
                            </a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-paperclip"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-pdf me-3"></i>
                                <span>PDF</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-csv me-3"></i>
                                <span>CSV</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-xml me-3"></i>
                                <span>XML</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-txt me-3"></i>
                                <span>Text</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-exe me-3"></i>
                                <span>Excel</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-printer me-3"></i>
                                <span>Print</span>
                            </a>
                        </div>
                    </div>
                    @can('create_products')
                    <a href="{{ route('products-create') }}" class="btn btn-primary">
                        <i class="feather-plus me-2"></i>
                        <span>Create Product</span>
                    </a>
                    @endcan
                </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>
    <div id="collapseOne" class="accordion-collapse collapse page-header-collapse">
        <div class="accordion-body pb-2">
            <div class="row">
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-users"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Today Products</span>
                                        <span class="fs-24 fw-bolder d-block"></span>
                                    </a>
                                </div>
                                <!-- <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>36.85%</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-check"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Month's Products</span>
                                        <span class="fs-24 fw-bolder d-block"></span>
                                    </a>
                                </div>
                                <!-- <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>24.56%</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-plus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Year's Products</span>
                                        <span class="fs-24 fw-bolder d-block"></span>
                                    </a>
                                </div>
                                <!-- <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>33.29%</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-minus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Total Products</span>
                                        <span class="fs-24 fw-bolder d-block"></span>
                                    </a>
                                </div>
                                <!-- <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>42.47%</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->
    <div class="main-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card stretch stretch-full">
                    <div class="card-body p-0">
                        <x-server-list-toolbar placeholder="Search products by name, code, or description" :filters="[
                            'status'=>['label'=>'Status','options'=>['active'=>'Active','inactive'=>'Inactive','archived'=>'Archived']],
                            'date_from'=>['label'=>'Created from','type'=>'date'],'date_to'=>['label'=>'Created to','type'=>'date'],
                        ]" />
                        <div class="table-responsive">
                            <table class="table table-hover" id="productServerList">
                                <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>Code</th>
                                        <th>Type</th>
                                        <th>Price</th>
                                        <th>Tax</th>
                                        <th>Discount</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($products as $product)
                                        <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_{{ $product->id }}">
                                                        <label class="custom-control-label"
                                                            for="checkBox_{{ $product->id }}"></label>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <a href="{{ route('products.view') }}?id={{ $product->id }}"
                                                    class="hstack gap-3">
                                                    {{-- <div class="avatar-image avatar-md">
                                                        <img src="assets/images/default.png" alt=""
                                                            class="img-fluid">
                                                    </div> --}}
                                                    <div>
                                                        <span
                                                            class="text-truncate-1-line">{{ $product->product_name }}</span>
                                                    </div>
                                                </a>
                                            </td>
                                            <td>{{ $product->product_code }}</td>
                                            @php
                                                $productTypes = [
                                                    1 => 'Electronics',
                                                    2 => 'Furniture',
                                                    3 => 'Clothing',
                                                    4 => 'Books',
                                                    5 => 'Toys',
                                                    6 => 'Automotive',
                                                ];
                                            @endphp
                                            <td>{{ $productTypes[$product->product_type_id] ?? 'Unknown' }}
                                            </td>

                                            <td>{{ $product->price }}</td>
                                            <td>{{ $product->tax }}</td>
                                            <td>{{ $product->discount }}</td>



                                            <td>{{ $product->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"
                                                        {{ $product->status == 'active' ? 'selected' : '' }}>
                                                        Active</option>
                                                    <option value="inactive" data-bg="bg-warning"
                                                        {{ $product->status == 'inactive' ? 'selected' : '' }}>
                                                        Inactive</option>
                                                    <option value="archived" data-bg="bg-danger"
                                                        {{ $product->status == 'archived' ? 'selected' : '' }}>
                                                        Declined</option>
                                                </select>
                                            </td>

                                            <td>
                                                <div class="hstack gap-2 justify-content-end">
                                                    <a href="{{ route('products.view') }}?id={{ $product->id }}"
                                                        class="avatar-text avatar-md">
                                                        <i class="feather feather-eye"></i>
                                                    </a>
                                                    <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')
                                                            <li><a class="dropdown-item"
                                                                    href="{{ route('products.edit') }}?id={{ $product->id }}"><i
                                                                        class="feather feather-edit-3 me-3"></i><span>Edit</span></a>
                                                            </li>
                                                            @endcan
                                                            <li><a class="dropdown-item"
                                                                    href="javascript:void(0)"><i
                                                                        class="feather feather-printer me-3"></i><span>Print</span></a>
                                                            </li>
                                                            <li><a class="dropdown-item"
                                                                    href="javascript:void(0)"><i
                                                                        class="feather feather-clock me-3"></i><span>Remind</span></a>
                                                            </li>
                                                            <li class="dropdown-divider"></li>
                                                            <li><a class="dropdown-item"
                                                                    href="javascript:void(0)"><i
                                                                        class="feather feather-archive me-3"></i><span>Archive</span></a>
                                                            </li>
                                                            <li><a class="dropdown-item"
                                                                    href="javascript:void(0)"><i
                                                                        class="feather feather-alert-octagon me-3"></i><span>Report
                                                                        Spam</span></a></li>
                                                            <li class="dropdown-divider"></li>
                                                            @can('delete_products')
                                                            <li>
                                                                <form
                                                                    action="{{ route('products.destroy', $product->id) }}"
                                                                    method="POST"
                                                                    onsubmit="return confirm('Are you sure you want to delete this Product?');"
                                                                    style="display: inline;">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit"
                                                                        class="dropdown-item text-danger"
                                                                        style="border: none; background: none; padding-left: 15px;">
                                                                        <i
                                                                            class="feather feather-trash-2 me-3"></i><span>Delete</span>
                                                                    </button>
                                                                </form>
                                                            </li>
                                                            @endcan
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="px-4 pb-4">{{ $productPaginator->links() }}</div>
    <!-- [ Main Content ] end -->
@endsection
