@extends('layouts.layout')
<style>
    table td a span {
        color: white !important;
    }
</style>
@section('content')
    <div class="page-body">
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>Internal Products
                                <small>Diamond Admin panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item">Products</li>
                            <li class="breadcrumb-item active">Products List</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->

        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header" style="display: initial">
                            <!--- Search input row start --->
                            <div class="row g-3 align-items-center mb-3">
                                <div class="col-md-12">
                                    <!-- The form itself is now a flex container -->
                                    <form method="GET" class="row g-2 align-items-center flex-wrap">
                                        <!-- Search Input: col-auto makes it take only necessary width -->
                                        <div class="col-auto">
                                            <input type="text" name="filter" class="form-control"
                                                value="{{ request()->input('filter') }}"
                                                placeholder="Search by SKU, NAME, ENTITY ID">
                                        </div>

                                        <!-- Type Select: col-auto -->
                                        <div class="col-auto">
                                            <select class="form-select" name="type">
                                                <option value="all"
                                                    {{ request()->input('type') == 'all' ? 'selected' : '' }}>All</option>
                                                <option value="parent_product"
                                                    {{ request()->input('type') == 'parent_product' ? 'selected' : '' }}>
                                                    Parent Product</option>
                                                <option value="child_product"
                                                    {{ request()->input('type') == 'child_product' ? 'selected' : '' }}>
                                                    Child Product</option>
                                            </select>
                                        </div>

                                        <!-- Menu Select: col-auto -->
                                        <div class="col-auto">
                                            <select class="form-select" name="menu">
                                                <option value="all"
                                                    {{ request()->input('menu') == 'all' ? 'selected' : '' }}>All</option>
                                                @foreach ($menus as $menu)
                                                    @if (!in_array($menu['name'], ['DIAMONDS', 'GEMSTONES', 'BRAND', 'MISSION']))
                                                        <option value="{{ $menu['id'] }}"
                                                            {{ request()->input('menu') == $menu['id'] ? 'selected' : '' }}>
                                                            {{ $menu['name'] }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Order By Select: col-auto -->
                                        <div class="col-auto">
                                            <select class="form-select" name="order_by">
                                                <option value=""
                                                    {{ request()->input('order_by') == '' ? 'selected' : '' }}>Default Order
                                                </option>
                                                <option value="id_asc"
                                                    {{ request()->input('order_by') == 'id_asc' ? 'selected' : '' }}>Order
                                                    by ID Asc</option>
                                                <option value="id_desc"
                                                    {{ request()->input('order_by') == 'id_desc' ? 'selected' : '' }}>Order
                                                    by ID Desc</option>
                                                <option value="sort_order"
                                                    {{ request()->input('order_by') == 'sort_order' ? 'selected' : '' }}>
                                                    Order by Sort Order</option>
                                            </select>
                                        </div>

                                        <!-- Search and Reset Buttons: Grouped in one col-auto with d-flex for inline display -->
                                        <div class="col-auto d-flex gap-2">
                                            <button type="submit" class="btn btn-outline-primary" title="Search"><i
                                                    class="fa fa-search"></i></button>
                                            <a href="{{ route('sama.internal-product.list') }}"
                                                class="btn btn-outline-secondary" title="Reset">Reset</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!--- Search input row end --->

                            <!-- Action Buttons Row Start-->
                            <div class="row g-2">
                                <div class="col-md-12 d-flex flex-wrap gap-2">
                                    <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
                                        data-bs-target="#addModal" title="Import Product">
                                        Import <i class="fa fa-upload"></i>
                                    </button>
                                    <a href="{{ route('internal.products.export') }}" class="btn btn-outline-primary"
                                        title="Export Product">
                                        Export <i class="fa fa-download"></i>
                                    </a>
                                    <a href="{{ route('sama.price.export') }}" class="btn btn-outline-primary">
                                        Import Price <i class="fa fa-upload"></i>
                                    </a>
                                    <a href="{{ route('internal.price.export') }}" class="btn btn-outline-secondary">
                                        Export Price <i class="fa fa-download"></i>
                                    </a>
                                    <a href="{{ route('product.media.count') }}" class="btn btn-outline-secondary">
                                        Export Media Count <i class="fa fa-download"></i>
                                    </a>
                                </div>
                            </div>
                            <!-- Action Buttons Row End -->
                        </div>
                        <div class="card-body order-datatable">
                            <div class="table-responsive table-desi order-datatable">
                                <table class="all-package coupon-table table table-striped display">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Sku</th>
                                            <th>on parent sku</th>
                                            <th>fractionsemimount</th>
                                            <th>Main category</th>
                                            <th>optins</th>


                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($list as $index => $item)
                                            @php
                                                if ($item->type == 'parent_product') {
                                                    $color = 'badge badge-success';
                                                    $tiptoolTitle = 'Parent Product';
                                                } elseif (
                                                    ($item->type == 'child_product' && $item->sama_parent_sku == '') ||
                                                    empty($item->sama_parent_sku)
                                                ) {
                                                    $color = 'badge badge-primary';
                                                    $tiptoolTitle = 'Child product with no parent mapping';
                                                } else {
                                                    $color = 'badge badge-info';
                                                    $tiptoolTitle = 'Child Product';
                                                }
                                            @endphp

                                            <tr>


                                                <td>{{ $item->name }}</td>
                                                <td><a href="javascript:void(0)" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="{{ $tiptoolTitle }}"><span
                                                            class="{{ $color }}">{{ $item->sama_sku }}</span></a>
                                                </td>
                                                <td>
                                                    {{ $item->type == 'parent_product' ? 'Parent Product' : 'Child Product' }}
                                                    <br>

                                                    <a href="javascript:void(0)"
                                                        style="text-decoration: underline; color:blue !important">{{ $item->sama_parent_sku }}</a>

                                                    {{-- {{ $item->sama_parent_sku }} --}}
                                                </td>

                                                <td>{{ $item->fractionsemimount }}</td>
                                                <td>{{ $item->menu_name }}</td>
                                                <td>
                                                    <a href="{{ route('edit.product.info', ['id' => $item->id]) }}"
                                                        title="Edit"><i class="fa fa-edit text-success"></i></a>
                                                    <a href="javascript:;" title="Delete"
                                                        onclick="deleteProduct({{ $item->id }})"><i
                                                            class="fa fa-trash text-danger"></i></a>
                                                </td>


                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                            <div
                                class="dataTables_paginate paging_simple_numbers d-flex justify-content-between align-items-center">
                                <div>
                                    Showing {{ $list->firstItem() }} to {{ $list->lastItem() }} of total
                                    {{ $list->total() }} entries
                                </div>
                                <div class="float-end">
                                    <p>{{ $list->links() }}</p>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
            <!-- Container-fluid Ends-->
        </div>
        <!-- Modal -->

    </div>

    {{-- create product model --}}
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Import</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
                </div>
                <form action="{{ route('sama.product.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Menu</label>
                            <select name="menu" required class="form-control">
                                <option selected disabled>choose menu</option>
                                @foreach ($menus as $menu)
                                    <option value="{{ $menu->name }}">{{ $menu->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <input type="file" name="excel_file" class="form-control" accept=".xlsx,.xls,.csv">
                            <span class="errors"></span>
                        </div>

                        <!-- Staging option -->
                        <div class="form-group mt-3">
                            <label>
                                <input type="checkbox" name="import_stage_only" value="1">
                                Import to staging only (do not publish live)
                            </label>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    {{-- add price model start  --}}
    <div class="modal fade" id="addPriceModal" tabindex="-1" aria-labelledby="addPriceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPriceModalLabel">Add Price</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
                </div>
                <form action="{{ route('sama.price.export') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="">Price Csv <span>*</span></label>
                            <input type="file" name="product_csv" id="product_csv" required class="form-control"
                                accept=".xlsx, .xls, .csv">
                            <span class="errors"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- add price model end  --}}

    @push('scripts')
        <script>
            function deleteProduct(id) {
                var route = "{{ route('sama.product.delete', ['id' => ':id']) }}";
                url = route.replace(':id', id);
                swal({
                        title: "Are you sure?",
                        text: "Once deleted, you will not be able to recover this data!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: url,
                                type: "GET",
                                success: function(response) {
                                    console.log(response);
                                    if (response.res == 'success') {
                                        swal(response.res, {
                                            icon: "success",
                                        });
                                        setTimeout(function() {
                                            window.location.reload();
                                        }, 900);
                                    } else {
                                        swal(response.res, {
                                            icon: "error",
                                        });
                                    }
                                },
                                error: function(response) {
                                    console.log(response);
                                }
                            });
                        } else {
                            swal("Your data is safe!");
                        }
                    });
            }
        </script>
    @endpush
@endsection