@extends('layouts.seller.app')
@section('title', 'Manage Home Section | Chemical Wholesale')
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title">Manage Homepage</h3>
                                <div class="cw-block-des text-soft">
                                    <p>Manage all your home page section.</p>
                                </div>
                            </div>
                            <div class="d-lg-flex d-none">
                                {{--
                                <form action="{{ route('seller.homepage.search') }}" method="POST">
                                    @csrf
                                    <div class="d-flex">
                                        <input type="text" name="search" placeholder="Search Orders..."
                                            class="form-control cw-search-input" value="{{ @$search['search'] }}">
                                    </div>
                                </form>
                                <a href="{{ route('seller.homepage') }}" class="btn-cw-cancel ms-2">
                                    <i class="bi bi-bootstrap-reboot me-2"></i>Reset
                                </a>
                                --}}
                            </div>
                        </div>
                    </div>

                    <div class="dash-order-filter mb-2">
                        <a href="{{ route('seller.homepage', ['modulename' => 'category']) }}"
                            class="order-filter-item {{ @$search['modulename'] == 'category' ? 'active' : '' }}"
                            data-status="category">Category</a>
                        <a href="{{ route('seller.homepage', ['modulename' => 'producttype']) }}"
                            class="order-filter-item {{ @$search['modulename'] == 'producttype' ? 'active' : '' }}"
                            data-status="producttype">Product Type</a>
                        <a href="{{ route('seller.homepage', ['modulename' => 'industry']) }}"
                            class="order-filter-item {{ @$search['modulename'] == 'industry' ? 'active' : '' }}"
                            data-status="industry">Product Industry</a>
                        <a href="{{ route('seller.homepage', ['modulename' => 'application']) }}"
                            class="order-filter-item {{ @$search['modulename'] == 'application' ? 'active' : '' }}"
                            data-status="application">Product Application</a>
                        <a href="{{ route('seller.homepage', ['modulename' => 'company']) }}"
                            class="order-filter-item {{ @$search['modulename'] == 'company' ? 'active' : '' }}"
                            data-status="company">Company</a>
                    </div>

                    <div class="card mb-4">
                        <div class="table-responsive">
                            <table class="table table-hover table-nowrap">
                                <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Order Number</th>
                                        <th scope="col">Featured</th>
                                        <th scope="col">Status</th>
                                        <th style="width: 280px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i=0; @endphp
                                    @if ($modules->count() > 0)
                                        @foreach ($modules as $module)
                                            <tr>
                                                <td>{{ @$module->name }}</td>
                                                <td>
                                                    <input type="number" min="1"
                                                        value="{{ @$module->order_number ? @$module->order_number : 0 }}"
                                                        id="{{ $modulename . @$module->uuid }}"
                                                        class="text-center col-sm-2 {{ $modulename . @$module->uuid }} ordernumberInput"
                                                        readonly="true">
                                                </td>
                                                <td class="featured{{ @$module['uuid'] }}">
                                                    <div class="form-check form-switch" title="Enable/Disable Yard Status">
                                                        <input class="form-check-input featuredstatus" type="checkbox"
                                                            data-id="{{ $module['uuid'] }}"
                                                            name="featuredstatus" value="1" id="featured{{ $modulename . @$module->uuid }}" disabled="true" {{ $module->display_on_home ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="featured{{ @$module['uuid'] }}"></label>
                                                    </div>
                                                </td>
                                                <td class="status{{ @$module['id'] }}">
                                                    {{ @$module->status ? 'Active' : 'InActive' }}</td>
                                                <td data-label="" class="text-start">
                                                    <a href="javascript:void(0);"
                                                        class="edit editnumber{{ $module->uuid }} order-status-btn bg-white"
                                                        data-module="{{ $modulename }}" data-id="{{ @$module->uuid }}"
                                                        id="editnumber{{ $module->uuid }}">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>

                                                    <a href="javascript:void(0);" data-module="{{ $modulename }}"
                                                        data-id="{{ @$module->uuid }}" id="savenumber{{ $module->uuid }}"
                                                        class="order-status-btn savenumber text-white"
                                                        style="display:none;">Save</a>
                                                    <a href="javascript:void(0);" id="cancelnumber{{ $module->uuid }}"
                                                        data-module="{{ $modulename }}" data-id="{{ @$module->uuid }}"
                                                        class="order-status-btn red cancel text-white"
                                                        style="display:none;">Cancel</a>
                                                </td>
                                            </tr>
                                            @php $i++; @endphp
                                        @endforeach
                                    @else
                                        <tr>
                                            <td Colspan="4" class="text-center">No Records Found</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div style="margin-top:10px;">
                        <nav class="d-flex align-items-center justify-content-between">
                            <div class="small">Showing {{ $modules->appends(['search' => @$search['search']])->count() }}
                                out of {{ $modules->appends(['search' => @$search['search']])->count() }}</div>
                            <ul class="pagination justify-content-end">
                                <li class="page-item {{ $modules->previousPageUrl() == '' ? 'disabled' : '' }}">
                                    <a class="page-link" href="{{ $modules->toArray()['first_page_url'] }}">First</a>
                                </li>
                                <li class="page-item {{ $modules->previousPageUrl() == '' ? 'disabled' : '' }}">
                                    <a class="page-link" href="{{ $modules->previousPageUrl() }}">Previous</a>
                                </li>
                                <li class="page-item {{ $modules->nextPageUrl() == '' ? 'disabled' : '' }}">
                                    <a class="page-link" href="{{ $modules->nextPageUrl() }}">Next</a>
                                </li>
                                <li class="page-item {{ $modules->nextPageUrl() == '' ? 'disabled' : '' }}">
                                    <a class="page-link" href="{{ $modules->toArray()['last_page_url'] }}">Last</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('css')
    <style>
        .ordernumberInput {
            border: none;
            background: #eee;
            border-radius: 10px;
            text-align: center
        }
    </style>
@endpush
@push('js')
    <script>
        var orderlink = "/admin/homepage/manage/ordernumber/";
        $(document).on('click', '.savenumber', function(e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            var modulename = $(this).attr('data-module');
            var ordernumber = $("#" + modulename + id).val();
            var link = $(this).attr('data-link');
            var featured = $("#featured" + modulename + id).is(":checked") ? 1 : 0;
            var reqdata = {
                id: id,
                module: modulename,
                ordernumber: ordernumber,
                featured: featured,
            };
            var link2 = orderlink + modulename;
            // console.log(reqdata, link);
            $.ajax({
                url: link2,
                type: 'POST',
                data: reqdata,
                dataType: 'json',
                context: this,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $('body').append(
                        '<div class="blockUI" style="z-index: 10000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;"></div>'
                    );
                },
                success: function(data) {
                    if (data.success == '1') {
                        sweetSuccess(data.msg);
                        $("#" + modulename + id).attr("readonly", true);
                        $("#featured" + modulename + id).prop("disabled", true);
                        $("#cancelnumber" + id).hide();
                        $("#savenumber" + id).hide();
                        $("#editnumber" + id).show();
                    } else {
                        sweetAlert(data.msg);
                    }
                    $("div.blockUI").remove();
                },
                error: function(result) {
                    // console.log('An error occurred: '+result.status+' '+result.statusText);
                    sweetAlert(result.responseJSON.message);
                    $("div.blockUI").remove();
                },
                cache: false
            });
        }); // Update Status

        $('.edit').on('click', function(event) {
            var id = $(this).attr('data-id');
            var modulename = $(this).attr('data-module');
            $(this).hide();
            $("#featured" + modulename + id).prop("disabled", false);
            $("#" + modulename + id).attr("readonly", false);
            $("#savenumber" + id).show();
            $("#cancelnumber" + id).show();
        })
        $('.cancel').on('click', function(event) {
            var id = $(this).attr('data-id');
            var modulename = $(this).attr('data-module');
            $(this).hide();
            $("#featured" + modulename + id).prop("disabled", true);
            $("#" + modulename + id).attr("readonly", true);
            $("#savenumber" + id).hide();
            $("#editnumber" + id).show();
        })
    </script>
@endpush