@extends('admin.dashboard.layouts.app')
@section('main')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">

<div class="content-wrapper">
    <section class="content-header">
        <h1>Beautician List</h1>
    </section>

    <section class="content">
        <table class="table table-bordered table-striped" id="beauticianTable">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Contact Number</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($saloons as $saloon)
                <tr>
                    <td>
                        @if($saloon->image)
                            <img src="{{ asset('storage/' . $saloon->image) }}" width="80">
                        @else
                            No Image
                        @endif
                    </td>
                    <td>{{ $saloon->name }}</td>
                    <td>{{ $saloon->location }}</td>
                    <td>{{ $saloon->contact_number }}</td>
                    <td>{{ $saloon->description }}</td>
                    <td>
                        <a href="{{ route('saloons.edit', $saloon->id) }}" class="btn btn-sm btn-info">Edit</a>
                        <form action="{{ route('saloons.destroy', $saloon->id) }}" method="POST" style="display:inline;">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </section>
</div>

<!-- EXACT SAME JS AS WORKING PAGE -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>

<script>
$(document).ready(function () {
    $('#beauticianTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        pageLength: 10,
        columnDefs: [
            { orderable: false, targets: [0, 5] }
        ]
    });
});
</script>

@endsection