Simple File Manage Design by index.php

��

@extends('layouts.admin')
@section('title', 'Bikers')
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="mb-2 row">
                    <div class="col-sm-12">
                        <h1 class="m-0 text-dark">Add Biker</h1>
                    </div>
                    <div class="col-sm-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item text-warning">
                                <a href="{{ url('/home') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active">Biker Lists</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                @if (count($errors) > 0)
                                    @foreach ($errors->all() as $error)
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <strong>{{ $error }}!</strong>
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endforeach
                                @endif
                                @if (session('success'))
                                    <div class="alert  alert-dismissible   alert-success">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                        {{ session('success') }}
                                    </div>
                                @endif
                                @if (session('error'))
                                    <div class="alert  alert-dismissible   alert-success">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                        {{ session('success') }}
                                    </div>
                                @endif

<div class="mb-2">
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#addBiker">
                                        Add Biker
                                    </button>
                                </div>
                                <table class="table table-bordered" id="example1">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Full Name</th>
                                            <th>Email</th>
                                            <th>Gender</th>
                                            <th>Phone Number</th>
                                            <th>Country</th>
                                            <th>Image</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php $count = 1; ?>
                                        @foreach ($bikers as $b)
                                            <tr>
                                                <td>{{ $count++ }}</td>
                                                <td>{{ $b->name }}</td>
                                                <td>{{ $b->email }}</td>
                                                <td>{{ $b->gender }}</td>
                                                <td>{{ $b->phone_number }}</td>
                                                <td>{{ $b->location }}</td>
                                                <td>

<img class="rounded" src="/biker_photos/thumbs/{{ $b->avatar }}"
                                                        alt="{{ $b->name }}" height="40" width="40">

</td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                        data-toggle="dropdown">
                                                        <i class="fa fa-cogs"></i>&nbsp;Action
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li style="cursor: pointer" class="dropdown-item text-success"
                                                            data-toggle="modal"
                                                            data-target="#editBiker{{ $b->id }}">
                                                            <i class="fa fa-edit"></i>
                                                            Edit
                                                        </li>
                                                        <li style="cursor: pointer" class="dropdown-item text-danger"
                                                            data-toggle="modal"
                                                            data-target="#deleteBiker{{ $b->id }}">
                                                            <i class="fa fa-edit"></i>
                                                            Delete
                                                        </li>

</ul>
                                                </td>
                                            </tr>
                                            {{-- delete modal --}}
                                            <div id="deleteBiker{{ $b->id }}" class="modal fade">
                                                <div class="modal-dialog modal-md">
                                                    <div class="modal-content">

<form action="/biker/delete/{{ $b->id }}" method="post">
                                                            @csrf
                                                            <div class="modal-body">
                                                                Are you sure you want to delete?
                                                            </div>
                                                            <div class="modal-footer justify-content-center">
                                                                <button type="button" class="btn btn-sm btn-default"
                                                                    data-dismiss="modal">
                                                                    Close
                                                                </button>
                                                                <button type="submit" class="btn btn-primary btn-sm">
                                                                    Delete {{ $b->name }}
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal fade" id="editBiker{{ $b->id }}">
                                                <div class="modal-dialog modal-md">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Update Biker Details</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                &times;
                                                            </button>
                                                        </div>
                                                        <form method="POST" action="{{ url('/biker/update') }}"
                                                            enctype="multipart/form-data">
                                                            @csrf
                                                            <div class=modal-body>
                                                                <div class="row">
                                                                    <input type="hidden" name="id"
                                                                        value="{{ $b->id }}">
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Full Name *</label>
                                                                        <input required type="text" class="form-control"
                                                                            name="name" value="{{ $b->name }}">
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Email *</label>
                                                                        <input required type="email"
                                                                            value="{{ $b->email }}"
                                                                            class="form-control" name="email">
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Date of Birth
                                                                            *</label>
                                                                        <input required value="{{ $b->dob }}"
                                                                            id="datepicker" class="form-control"
                                                                            name="dob">
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Gender *</label>
                                                                        <select required class="form-control"
                                                                            name="gender" id="gender">
                                                                            <option
                                                                                @if ($b->gender == 'Male') selected @endif
                                                                                value="Male">Male</option>
                                                                            <option
                                                                                @if ($b->gender == 'Female') selected @endif
                                                                                value="Female">Female</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Phone Number</label>
                                                                        <input type="tel" class="form-control"
                                                                            name="phone_number"
                                                                            value="{{ $b->phone_number }}">
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Country *</label>
                                                                        <input required type="text"
                                                                            class="form-control" name="location"
                                                                            value="{{ $b->location }}">
                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label class="control-label">Avatar</label>
                                                                        <input id="avatar1" type="file"
                                                                            class="form-control" name="avatar">
                                                                        <p>
                                                                            <small>Leave it empty to use current
                                                                                photo</small>
                                                                        </p>
                                                                    </div>
                                                                    <div id="avatar_prev"></div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer justify-content-center">
                                                                <button type="button" class="btn btn-sm btn-default"
                                                                    data-dismiss="modal">
                                                                    Close
                                                                </button>
                                                                <button type="submit" class="btn btn-primary btn-sm">
                                                                    Update {{ $b->name }}
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="modal fade" id="addBiker">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Biker</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            &times;
                        </button>
                    </div>
                    <form id="biker-form" method="post" action="{{ url('/biker/store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <div class=modal-body>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label class="control-label">Full Name *</label>
                                    <input required type="text" class="form-control" name="name"
                                        value="{{ old('name') }}">
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Email *</label>
                                    <input required type="email" value="{{ old('email') }}" class="form-control"
                                        name="email">
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Date of Birth *</label>
                                    <input required value="{{ old('dob') }}" id="datepicker1" class="form-control"
                                        name="dob">
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Gender *</label>
                                    <select required class="form-control" name="gender" id="gender">
                                        <option selected>--select--</option>
                                        <option @selected(old('gender') == 'Male') value="Male">Male</option>
                                        <option @selected(old('gender') == 'Female') value="Female">Female</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Phone Number</label>
                                    <input required type="tel" class="form-control" name="phone_number"
                                        value="{{ old('phone_number') }}">
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Country *</label>
                                    <input required type="text" class="form-control" name="location"
                                        value="{{ old('location') }}">
                                </div>
                                <div class="form-group col-md-12">
                                    <label class="control-label">Photo</label>
                                    <input type="file" class="form-control" id="avatar" name="avatar">
                                </div>
                                <div id="avatar_prev"></div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-primary btn-lg">
                                Add
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="/resources/resources/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/js/bootstrap-datepicker.min.js"></script>
    <script>
        $('#datepicker,#datepicker1').datepicker({
            format: 'dd/mm/yyyy',
            endDate: '-18y'
        });

$('#avatar,#avatar1').on('change', function(ev) {
            let imgUrl = URL.createObjectURL(ev.target.files[0])
            $('#avatar_prev').html(`<img style="max-height:100px" src="${imgUrl}"/>`)
        })
        $('#biker-form').validate()
    </script>
@endsection
@section('css')
    <link rel="stylesheet" href="/css/bootstrap-datepicker.min.css">
    <style>
        .error {
            color: crimson !important;
        }
    </style>
@endsection