@extends('layout.master')
@push('plugin-styles')
    <link href="{{ asset('assets2/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
@section('title', __('dashboard.clean'))
@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
      <!--<h6 class="fw-semibold mb-0">{{ __('dashboard.products') }}</h6>-->
      <ul class="d-flex align-items-center gap-2">
        <li class="fw-medium">
          <a href="{{ route('home') }}" class="d-flex align-items-center gap-1 hover-text-primary">
            <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
            {{ __('dashboard.main menu') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">{{ __('dashboard.clean') }}</li>
      </ul>
    </div>
    
    <div class="card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex flex-wrap align-items-center gap-3">
                <h5 class="card-title mb-0">{{ __('dashboard.clean packages') }}</h5>
                <div class="d-flex align-items-center gap-2">
                </div>
                <div class="icon-field">
                </div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-3">
                <!--<button data-bs-toggle="modal" data-bs-target="#createModal" class="btn btn-sm btn-warning-600">{{ __('dashboard.settings without package') }}</button>-->
                <a href="{{ route('cleans.create_package') }}" class="btn btn-sm btn-primary-600"><i
                    class="ri-add-line"></i>{{ __('dashboard.Add a new package') }}</a>
            </div>
        </div>
        <div class="card-body" style="overflow-x: auto;">
        <table class="table bordered-table mb-0" id="dataTableExample" style="width: 100%">
            <thead>
            <tr style="text-align:center !important;">
                <!--<th scope="col" style="text-align:center !important;">-->
                <!--    <div class="form-check style-check d-flex-->
                <!--        align-items-center">-->
                <!--        <input class="form-check-input" type="checkbox" value=""-->
                <!--        id="checkAll">-->
                <!--        <label class="form-check-label" for="checkAll">-->
                <!--        #-->
                <!--        </label>-->
                <!--    </div>-->
                <!--</th>-->
                <!--<th scope="col" style="text-align:center !important;">{{ __('dashboard.type') }}</th>-->
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.name') }} </th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.months') }} </th>
                <!--<th scope="col" style="text-align:center !important;">{{ __('dashboard.visits_type') }}</th>-->
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.visits') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.price') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.status') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.action') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($cleans as $service)
            <tr>
                <td>{{ session()->get('lang') == 'en' ? $service->name_en : $service->name }}</td>
                <td>{{ $service->months }}</td>
                <!--<td>{{ __('dashboard.'.$service->visits_type) }}</td>-->
                <td>{{ $service->visits }} {{ __('dashboard.'.$service->visits_type) }}</td>
                <td>{{ $service->price }}</td>
                <td>{{ __('dashboard.'.$service->status) }}</td>
                <td>
                    <!--<a href="javascript:void(0)" class="w-32-px h-32-px-->
                    <!--    bg-primary-light text-primary-600 rounded-circle-->
                    <!--    d-inline-flex align-items-center justify-content-center">-->
                    <!--    <iconify-icon icon="iconamoon:eye-light"></iconify-icon>-->
                    <!--</a>-->
                    <a href="{{ route('cleans.edit_package', [$service->id]) }}" class="w-32-px h-32-px
                        bg-success-focus text-success-main rounded-circle
                        d-inline-flex align-items-center justify-content-center">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                    </a>
                    <a type="button" data-url="{{ route('cleans.destroy_package', [$service->id]) }}" class="w-32-px h-32-px
                        bg-danger-focus text-danger-main rounded-circle
                        d-inline-flex align-items-center justify-content-center delete-confirm">
                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                    </a>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        </div>
    </div>
    
    <br>
    
    <div class="card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex flex-wrap align-items-center gap-3">
                <h5 class="card-title mb-0">{{ __('dashboard.settings without package') }}</h5>
                <div class="d-flex align-items-center gap-2">
                </div>
                <div class="icon-field">
                </div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-3">
                <!--<button data-bs-toggle="modal" data-bs-target="#createModal" class="btn btn-sm btn-warning-600">{{ __('dashboard.settings without package') }}</button>-->
                <a href="{{ route('cleans.create_general') }}" class="btn btn-sm btn-primary-600"><i
                    class="ri-add-line"></i>{{ __('dashboard.Add a new settings') }}</a>
            </div>
        </div>
        <div class="card-body" style="overflow-x: auto;">
        <table class="table bordered-table mb-0" id="dataTableExample1" style="width: 100%">
            <thead>
            <tr style="text-align:center !important;">
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.size_from') }} </th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.size_to') }} </th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.price_size') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.price_distance') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.status') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.action') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($clean_generals as $service)
            <tr>
                <td>{{ $service->size_from }}</td>
                <td>{{ $service->size_to }}</td>
                <td>{{ $service->price_size }}</td>
                <td>{{ $service->price_distance }}</td>
                <td>{{ __('dashboard.'.$service->status) }}</td>
                <td>
                    <!--<a href="javascript:void(0)" class="w-32-px h-32-px-->
                    <!--    bg-primary-light text-primary-600 rounded-circle-->
                    <!--    d-inline-flex align-items-center justify-content-center">-->
                    <!--    <iconify-icon icon="iconamoon:eye-light"></iconify-icon>-->
                    <!--</a>-->
                    <a href="{{ route('cleans.edit_general', [$service->id]) }}" class="w-32-px h-32-px
                        bg-success-focus text-success-main rounded-circle
                        d-inline-flex align-items-center justify-content-center">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                    </a>
                    <a type="button" data-url="{{ route('cleans.destroy_general', [$service->id]) }}" class="w-32-px h-32-px
                        bg-danger-focus text-danger-main rounded-circle
                        d-inline-flex align-items-center justify-content-center delete-confirm">
                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                    </a>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        </div>
    </div>
    

    
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets2/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets2/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets2/js/data-table.js') }}"></script>
    <script>
        $(function() {
            $('#dataTableExample1').DataTable({
            //   "aLengthMenu": [
            //     [10, 30, 50, -1],
            //     [10, 30, 50, "All"]
            //   ],
            //   "iDisplayLength": 10,
              "language": {
                search: ""
              },
              scrollCollapse:true
            });
            $('#dataTableExample1').each(function() {
              var datatable = $(this);
              // SEARCH - Add the placeholder for Search and Turn this into in-line form control
              var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
              search_input.attr('placeholder', 'Search');
              search_input.removeClass('form-control-sm');
              // LENGTH - Inline-Form control
              var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
              length_sel.removeClass('form-control-sm');
            });
        });
    </script>
@endpush