@extends('admin.layouts.adminapp') @section('content')

<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Home</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">स्लाइडर</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!--end breadcrumb-->
        <div class="row">
            @if(permission('Slider','create'))
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">+ स्लाइडर</h6>
                        </div>
                    </div>

                    <div class="card-body">
                        <form action="{{ isset($edt->id)?route('sliders.update',$edt->id):route('sliders.store') }}" method="post" class="row g-3 needs-validation" enctype="multipart/form-data" novalidate>
                            @csrf @if(isset($edt)) @method('PUT')
                            <!-- This will make the form use the PUT method for updating -->
                            @endif @if (Session::has('success'))
                            <div class="alert alert-success">{{Session::get('success')}}</div>
                            @endif @if (Session::has('fail'))
                            <div class="alert alert-danger">{{Session::get('fail')}}</div>
                            @endif

                            <div class="col-md-4">
                                <label class="form-label"> Name </label>
                                <input class="form-control" type="text" name="name" value="{{ isset($edt->name)?$edt->name:''}}" placeholder="Enter Name" />
                                <span class="text-danger"> @error('name') {{$message}} @enderror </span>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label"> Slider Image Upload </label>
                                <input class="form-control" type="file" name="file" />
                                <span class="text-danger"> @error('file') {{$message}} @enderror </span>
                            </div>

                            <div class="col-md-12">
                                <div class="d-md-flex d-grid align-items-center gap-3">
                                    <input type="hidden" name="id" value="{{ isset($edt->id)?$edt->id:''}}" />
                                    <button type="submit" class="btn btn-primary px-4 text-white">Submit</button>
                                    <button type="reset" class="btn btn-light px-4">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endif @if(permission('Slider','show'))
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">स्लाइडर</h6>
                        </div>
                    </div>

                    <div class="card-body p-4">
                        <div class="table-responsive">
                            <table id="example" class="table table-striped table-bordered" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                        <th>Name</th>
                                        <th>img</th>
                                        <th>Slider View</th>
                                        <th>Updated At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($sliders as $key=>$slider)
                                    <tr>
                                        <td>{{ $key + 1}}</td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-xs btn-{{ $slider->status ==1?'primary':'danger'}}">{{ $slider->status ==1?'Enable':'Disable'}}</button>

                                                <button
                                                    type="button"
                                                    class="btn btn-sm btn-{{ $slider->status ==1?'primary':'danger'}} split-bg-{{ $slider->status ==1?'primary':'danger'}} dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown"
                                                    aria-expanded="false"
                                                >
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end" style="">
                                                    <form action="{{ route('sliders.status') }}" method="post" onsubmit="return confirmAction('enable');">
                                                        @csrf
                                                        <input type="hidden" name="status" value="1" />
                                                        <input type="hidden" name="id" value="{{ $slider->id}}" />
                                                        <button type="submit" class="dropdown-item">Enable</button>
                                                    </form>

                                                    <form action="{{ route('sliders.status') }}" method="post" onsubmit="return confirmAction('disable');">
                                                        @csrf
                                                        <input type="hidden" name="status" value="0" />
                                                        <input type="hidden" name="id" value="{{ $slider->id}}" />
                                                        <button type="submit" class="dropdown-item">Disable</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-primary">Action</button>
                                                <button type="button" class="btn btn-sm btn-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end">
                                                    <a class="dropdown-item" href="{{ route('sliders.edit',$slider->id)}}" onclick="return confirm('Are you sure you want to edit this Slider?')">Edit</a>
                                                    <form action="{{ route('sliders.destroy', $slider->id) }}" method="POST" id="delete-form-{{ $slider->id }}" style="display: inline;">
                                                        @csrf @method('DELETE')
                                                    </form>
                                                    <a
                                                        class="dropdown-item"
                                                        href="javascript:void(0);"
                                                        onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this sliders?')) document.getElementById('delete-form-{{ $slider->id }}').submit();"
                                                    >
                                                        Delete
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $slider->name }}</td>
                                        <td><img src="{{ asset($slider->file) }}" class="user-img" alt="{{ $slider->name}}" /></td>
                                        <td>
                                            <div class="col">
                                                <!-- Button trigger modal -->
                                                <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal{{ $slider->id}}">Slider View</button>
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal{{ $slider->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">Slider View</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <img src="{{ asset($slider->file) }}" width="470px" height="180px" frameborder="0" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ date("d-m-Y h:i:s A",strtotime($slider->updated_at)) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
        <!--end row-->
    </div>
</div>
<!--end page wrapper -->
@endsection @section('script')

<script>

    function confirmDelete(event) {
           if (!confirm('Are you sure you want to delete this item?')) {
               event.preventDefault();  // Prevents the default action of the link
           }
       }

        @if (Session::has('success'))
               success_noti('{{Session::get('success')}}')
       @endif

       @if (Session::has('fail'))
               warning_noti('{{Session::get('fail')}}')
       @endif

       @if(session('error'))
           warning_noti('{{ session('error') }}')
       @endif

       function confirmAction(action) {
           var message = action === "enable" ? "Are you sure you want to enable this Slider?" : "Are you sure you want to disable this Slider?";
           return confirm(message);
       }
</script>

@endsection