@extends('backend.layout.master')

@section('title')
    Riders
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mt-2">
                @session('status')
                    <div class="alert alert-{{ session('bg') }} fade show alert-dismissible" role="alert">
                        {{ session('status') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endsession
            </div>
            <div class="col-md-12">
                <div class="card mt-3">
                    <div class="card-top mx-3 my-2 ">
                        <h4 class="font-bold">All riders</h4>
                    </div>
                    <div class="card-body pt-0 table-responsive">
                        <table class="table table-striped table-hover table-bordered text-center table-dark">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">Id</th>
                                    <th>Rider Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Addres</th>
                                    <th>City</th>
                                    <th>Vehicle</th>
                                    <th style="width: 90px;">Photo</th>
                                    <th style="width: 90px;">NID Front</th>
                                    <th style="width: 90px;">NID Back</th>
                                    <th style="width: 80px;">Active Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($riders as $rider)
                                    <tr>
                                        <td> {{ $rider->id }} </td>
                                        <td> {{ $rider->name }} </td>
                                        <td> {{ $rider->email }} </td>
                                        <td> {{ $rider->phone }} </td>
                                        <td> {{ $rider->address }} </td>
                                        <td> {{ $rider->city }} </td>
                                        <td> {{ $rider->vehicle }} </td>
                                        <td>
                                            <img src="{{ URL::asset('storage/' . $rider->photo) }}" alt=""
                                                height="40px" width="40px">
                                        </td>
                                        <td>
                                            <img src="{{ URL::asset('storage/' . $rider->nid_front) }}" alt=""
                                                height="40px" width="40px">
                                        </td>
                                        <td>
                                            <img src="{{ URL::asset('storage/' . $rider->nid_back) }}" alt=""
                                                height="40px" width="40px">
                                        </td>
                                        <td>
                                            <div class="rounded-circle bg-{{ $rider->active == 1 ? 'active' : 'danger' }}"
                                                style="width: 20px; height: 20px;"></div>
                                        </td>
                                        <td>
                                            <a type="button" class="btn btn-success btn-sm editBtn" data-toggle="modal"
                                                data-target="#editModal">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <!-- Button trigger modal -->
                                            <button type="button" class="btn btn-danger btn-sm deleteBtn"
                                                data-toggle="modal" data-target="#deleteModal"
                                                data-id="{{ $rider->id }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="12" class="font-weight-bold">No rider Added</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="mt-2 d-flex justify-content-center">
                            {{ $riders->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- UPDATE MODAL BOX --}}

    {{-- <div class="modal fade" id="editModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="updateForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">Edit rider</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="e_name">rider Name <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('e_name') }}" placeholder="rider Name"
                                class="form-control @error('e_name') is-invalid  @enderror" id="e_name"
                                name="e_name">
                            @error('e_name')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_category">Category <span class="text-danger">*</span></label>
                            <select name="e_category" value="{{ old('e_category') }}" id="e_category"
                                class="form-control @error('e_category') is-invalid  @enderror">
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ $cat->id }}> {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('e_category')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_old_price">Old Price</label>
                            <input type="text" value="{{ old('e_old_price') }}" placeholder="Old price"
                                class="form-control @error('e_old_price') is-invalid  @enderror" id="e_old_price"
                                name="e_old_price">
                            @error('e_old_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_current_price">Current Price <span class="text-danger">*</span></label>
                            <input type="text" value="{{ old('e_current_price') }}" placeholder="Current Price"
                                class="form-control @error('e_current_price') is-invalid  @enderror" id="e_current_price"
                                name="e_current_price">
                            @error('e_current_price')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_stock">Stock/Quantity</label>
                            <input type="text" value="{{ old('e_stock') }}" placeholder="Stock or Quantity"
                                class="form-control @error('e_stock') is-invalid  @enderror" id="e_stock"
                                name="e_stock">
                            @error('e_stock')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_warning">Warning</label>
                            <input type="text" value="{{ old('e_warning') }}" placeholder="Set warning alert"
                                class="form-control @error('e_warning') is-invalid  @enderror" id="e_warning"
                                name="warning">
                            @error('e_warning')
                                <span class="text-danger mt-1"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="e_image">Image </label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('e_image') is-invalid  @enderror"
                                    name="e_image" id="inputGroupFile02">
                                <label class="custom-file-label" for="inputGroupFile02"
                                    aria-describedby="inputGroupFileAddon02">Choose file</label>
                                @error('e_image')
                                    <span class="text-danger mt-1"> {{ $message }} </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}

    {{-- DELETE MODAL BOX --}}

    <!-- Modal -->
    {{-- <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete rider</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you confirm to Delete this rider permanently?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}
@endsection