@extends('layouts.app')

@section('title', 'Client: Manage Locations')

@push('styles')
@vite(['resources/css/crudTableStyler.css'])
@endpush

@section('content')
<div class="container-fluid p-4">
    <h1 class="fs-2"><strong>Manage Locations</strong></h1>

    <div class="d-flex flex-row justify-content-between pb-4 pt-5">

        <form method="get" action="{{ route('locations.index') }}" class="justify-content-between w-25">
            <div class="input-group">
                <input type="text" class="form-control" name="search" placeholder="Search location..." value="{{ request()->search }}">
                <div class="input-group-append">
                    <button type="submit" class="input-group-text bg-transparent"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </form>

        <button class="rounded-3 btn btn-info text-white fw-semibold btn-sm float-right align-middle"  data-placement="left" data-bs-toggle="modal" data-bs-target="#createLocationModal">
            <i class='bx bx-plus-circle'></i>
            {{ __('CREATE LOCATION') }}
        </button>

    </div>


    <div class="table-responsive mh-60-vh overflow-y-scroll mb-4">
        @if($locations->count())
        <table class="table bg-transparent table-hover">
            <thead class="thead sticky-top">
                <tr class="fw-normal text-secondary">
                    <th class="text-secondary">ADDRESS</th>
                    @if(auth()->user()->is_admin)
                    <th class="text-secondary">CLIENT NAME</th>
                    <th class="text-secondary">COMPANY</th>
                    @endif
                    <th class="text-secondary text-center"  width="150px">ACTION</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($locations as $location)
                    <tr class="align-middle">
                        <td>{{ $location->address }}</td>
                        @if(auth()->user()->is_admin)
                        <td>{{ $location->user->first_name.' '.$location->user->last_name }}</td>
                        <td>{{ $location->user->company }}</td>
                        @endif
                        <td class="text-center">
                            <button title="Edit location" class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#editLocationModal-{{ $location->id }}">
                                <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                    <i class="bi-pencil-square"></i>
                                </a>
                            </button>
                            &nbsp;&nbsp;
                            <button title="Remove location" class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#deleteLocationModal-{{ $location->id }}">
                                <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                    <i class="bi bi-trash-fill"></i>
                                </a>
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        @else
            <div style="height: 480px" class="m-0 p-0 d-flex flex-column align-items-center justify-content-center">
                <p class="m-0 p-0 text-center align-middle text-secondary fw-semibold fs-5">No locations match this search.</p>
                <a class="link-primary bg-transparent" href="{{ route('locations.index') }}">Reset Search</a>
            </div>
            {{-- <tr style="box-shadow: none !important; border-bottom: transparent !important;">
                <td colspan="3" class="text-center text-secondary fw-semibold align-middle fs-5" style="background: none !important;">No locations match this search.</td>
            </tr> --}}
        @endif
    </div>

    {!! $locations->links() !!}

</div>

    @if($message = Session::get('success') || $message = Session::get('warning') || $errors->any())
    <div class="d-flex flex-row w-100 justify-content-center">
        @if ($errors->any())
        <div class="alert alert-danger">
            @foreach($errors->all() as $error)
            <p class="text-center m-0 p-0">{{ $error }}</p>
            @endforeach
        @else
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
            @elseif ($message = Session::get('warning'))
            <div class="alert alert-warning">
            @endif
            <p class="text-center m-0 p-0">{{ $message }}</p>
        @endif
        </div>
    </div>
    @endif

    @include('client.location.modal-create')
    @foreach($locations as $location)
        @include('client.location.modal-edit', ['location' => $location])
        @include('client.location.modal-delete', ['location' => $location])
    @endforeach

    <script src="{{ asset('js/modalCrudForms.js') }}"></script>
    <script>
        let updateButtons = document.querySelectorAll('.updateLocationButton');
        let updateForms = document.querySelectorAll('.updateLocationForm');
        let deleteButtons = document.querySelectorAll('.deleteLocationButton');
        let deleteForms = document.querySelectorAll('.deleteLocationForm');

        let createForm = document.querySelector('#createLocationForm');
        let createButton = document.querySelector('#createLocationButton');

        setModalFormEventListeners(updateButtons, updateForms, "data-location-id");
        setModalFormEventListeners(deleteButtons, deleteForms, "data-location-id");
        setSingleModalFormEventListener(createButton, createForm);

        setTimeout(function(){
            const alerts = Array.from(document.getElementsByClassName('alert'));

            alerts.forEach(alert => {
                alert.remove();
            });

        }, 2500);
    </script>
@endsection