@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.sites_list') }}
@endsection


@section('page-script')

@endsection

@section('content')
<style>
    .site-img {
        height: 160px !important;
    }

    .card-h {
        min-height: 300px;
    }

</style>

<div class="row py-3 mb-4">
    <div class="col-md">
        <h4 class="fw-bold">{{ __('client.sites_list') }}</h4>
    </div>
    <div class="col-md text-md-end">
        <a class="btn btn-primary" href="{{ route('client.site.create') }}">{{ __('client.add_new_site') }}</a>
    </div>
</div>

@include('client.responses.messages')

<div class="row">
    @foreach ($sites as $site)
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card card-h">
            <img class="card-img-top site-img" src="{{ $site->picture ? url($site->picture) : url('img/site.png')}}" alt="Site picture">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title">{{ $site->name }}</h5>
                    </div>
                    <div class="col text-end">
                        <div class="dropdown">
                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="{{ route('client.site.edit', $site->id) }}"><i class="bx bx-edit-alt me-1"></i>{{ __('client.edit') }}</a>
                                <button class="dropdown-item" onclick="deleteSite('{{ route('client.site.delete', $site->id) }}')"><i class="bx bx-trash me-1"></i> {{ __('client.delete') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="card-text">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="12">
                        <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
                    </svg>
                    <span class="mx-2">
                        {{ $site->address }}
                    </span>
                </p>
            </div>
        </div>
    </div>
    @endforeach
</div>
<button hidden type="button" data-bs-toggle="modal" id="delete-btn" data-bs-target="#delete-site"></button>
<div class="modal fade" id="delete-site" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel1">{{ __("client.validation_window") }}</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p class="h5">
                {{ __("client.delete_site_validation") }}
            </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __("client.close") }}</button>
          <form id="delete-site-form" method="POST">
            @csrf
            <button type="submit" class="btn btn-danger">{{ __("client.delete") }}</button>
          </form>
        </div>
      </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function deleteSite(route) {
        $("#delete-site-form").attr("action", route);
        $('#delete-btn').trigger('click');
    }
</script>
@endsection