@extends('layouts.master')
@section('title')

@endsection

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') sliders @endslot
        @slot('title')  List @endslot
    @endcomponent

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="mb-3">

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-inline float-md-end mb-3">
                                <div class="search-box ms-2">
                                    <div class="position-relative">
                                        <input type="text" class="form-control rounded bg-light border-0"
                                            placeholder="Search...">
                                        <i class="mdi mdi-magnify search-icon"></i>
                                    </div>
                                </div>

                            </div>
                        </div>

                        @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    </div>
                    <!-- end row -->
                    <div class="table-responsive mb-4">
                        <table class="table table-centered table-nowrap mb-0">
                            <thead>
                                <tr>
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check font-size-16">
                                            <input type="checkbox" class="form-check-input" id="contacusercheck">
                                            <label class="form-check-label" for="contacusercheck"></label>
                                        </div>
                                    </th>

                                    <th scope="col">id</th>
                                    <th scope="col">image</th>
                                    <th scope="col">title</th>
                                    <th scope="col">title ar</th>
                                    <th scope="col">type</th>
                                    <th scope="col">id_redirect</th>
                                    <th scope="col">per_or_fixed</th>
                                    <th scope="col">price</th>
                                    <th scope="col">created_at</th>
                                    <th scope="col">updated_at</th>
                                    <th scope="col" style="width: 200px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($data as $slider )

                               <tr>
                                    <th scope="row">
                                        <div class="form-check font-size-16">
                                            <input type="checkbox" class="form-check-input" id="contacusercheck1">
                                            <label class="form-check-label" for="contacusercheck1"></label>
                                        </div>
                                    </th>

                                    <td>{{ $slider->id }}</td>
                                    <td>
                                      <a href="{{ '/upload/image/sliders/'.$slider->image }}"><img class="avatar-xs rounded-circle me-2" src="{{ '/upload/image/sliders/'.$slider->image }}" alt=""></a>
                                    </td>
                                    <td>{{ $slider->title }}</td>
                                    <td>{{ $slider->title_ar }}</td>
                                    <td>{{ $slider->type }}</td>
                                    <td>{{ $slider->id_redirect }}</td>
                                    <td>{{ $slider->per_or_fixed }}</td>
                                    <td>{{ $slider->price }}</td>
                                    <td>{{ $slider->created_at }}</td>
                                    <td>{{ $slider->updated_at }}</td>
                                    <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a href="{{ route('slider.edit', $slider->id) }}" class="px-2 text-primary"><i
                                                        class="uil uil-pen font-size-18"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <form action="{{ route('slider.destroy', $slider->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="px-2 text-danger" onclick="return confirm('Are you sure?')"><i class="uil uil-trash-alt font-size-18"></i></button>
                                                </form>
                                            </li>

                                        </ul>
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

@endsection