@extends('master.master_back')
@section('title')
    RDPC - Liste des Departements
@endsection
@section("styles-up")
    <link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
<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">Departements</div>
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Liste des Departements</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->
    <div class="card">
        <div class="card-body">
            <div class="page-header mb-4">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">Departements</h3>
                    </div>
                    <div class="col-auto text-end float-end ms-auto download-grp">
                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addDp" class="btn btn-light mb-3 mb-lg-0"><i class='bx bxs-plus-square'></i>Ajouter un departement</a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="example2" class="table table-striped table-bordered">
                    <thead class="student-thread">
                        <tr>
                            <th>
                                <div class="form-check check-tables">
                                    <input class="form-check-input" type="checkbox"  value="something">
                                </div>
                            </th>
                            <th>N°</th>
                            <th>Nom</th>
                            <th>Region</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    @if(isset($data) && COUNT($data) > 0)
                    <tbody>
                        @foreach ($data as $key => $value)
                        <tr>
                            <td>
                                <div class="form-check check-tables">
                                    <input class="form-check-input" type="checkbox"  value="something">
                                </div>
                            </td>
                            <td>{{ ++$key }}</td>
                            <td>{{ $value->dp_name }}</td>
                            <td>{{ $value->region->reg_name }}</td>
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn btn-light sharp text-white" data-bs-toggle="dropdown">
                                        <svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#fff" cx="5" cy="12" r="2"/><circle fill="#fff" cx="12" cy="12" r="2"/><circle fill="#fff" cx="19" cy="12" r="2"/></g></svg>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editRole{{ $value->dp_id }}">Edit</a>
                                        <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- Modal Edit Role -->
                        <div class="modal fade" id="editRole{{ $value->dp_id }}">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h3 class="modal-title">Modifier le departement  {{ $value->dp_name }}</h3>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form class="profile-form edit_role" method="post" id="edit_dp{{ $value->dp_id }}" action="{{ route('post.backend.edit.department', $value->dp_id) }}"  onsubmit="SendDataUpdateAnimation(event,'{{ $value->dp_id }}','edit_dp{{ $value->dp_id }}')">
                                            @csrf
                                            <div class="row">
                                                <div class="col-sm-12 mb-3">
                                                    <label class="form-label">Region</label>
                                                    <select class="form-control select2" name="region">
                                                        <option value="">Selectionner une region</option>
                                                        @if(isset($regions) && COUNT($regions) > 0)
                                                            @foreach ($regions as $key => $r)
                                                                <option value="{{ $r->reg_id }}" {{ $r->reg_id == $value->reg_id ? 'selected' : '' }} >
                                                                    {{ $r->reg_name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select><br>
                                                </div>
                                                <div class="col-sm-12 mb-3">
                                                    <label class="form-label">Nom du Departement</label>
                                                    <input type="text" class="form-control text-uppercase" name="name" value="{{ $value->dp_name }}">
                                                </div>
                                            </div>
                                            <input type="submit" class="btn btn-light btn_submit mt-4" value="Modifier" />
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Quitter</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </tbody>
                    @endif
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Add Role -->
<div class="modal fade" id="addDp">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Enregistrement d'un Departement</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <div class="modal-body">
                <form class="profile-form add_dp" method="post" id="add_dp" action="{{ route('post.backend.add.department') }}"  onsubmit="SendDataAnimation(event,'add_dp')">
                    @csrf
                    <div class="row">
                        <div class="col-sm-12 mb-3">
                            <label class="form-label">Region</label>
                            <select class="form-control select2" name="region">
                                <option value="">Selectionner une region</option>
                                @if(isset($regions) && COUNT($regions) > 0)
                                    @foreach ($regions as $key => $r)
                                        <option value="{{ $r->reg_id }}">
                                            {{ $r->reg_name }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-sm-12 mb-3 mt-3">
                            <label class="form-label">Nom du Departement</label>
                            <input type="text" class="form-control text-uppercase" name="name" placeholder="Departement">
                        </div>
                    </div>
                    <input type="submit" class="btn btn-light btn_submit mt-3" value="Enregistrer" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Quitter</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var table = $('#example2').DataTable( {
                lengthChange: true,
                buttons: ['excel', 'pdf', 'print']
            });
            table.buttons().container().appendTo( '#example2_wrapper .col-md-6:eq(0)' );
        });
    </script>
@endsection