@extends('layouts.app')
@section('additionnalCSS')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@stop
@section('content')
    <div class="container mt-3 mb-5">
        @if(session()->has('updateBorrow'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">x</button>
                {{ session()->get('updateBorrow') }}
            </div>
        @endif
        @if(session()->has('deleteBorrow'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">x</button>
                {{ session()->get('deleteBorrow') }}
            </div>
        @endif
        @foreach ($borrows as $b)
            <div class="card {{ $b->status == 'finish' ? 'border-warning' : 'border-dark' }} my-1">
                <div class="card-header font-weight-bold">
                    <div class="row">
                        <div class="col-lg-2">
                            Emprunt No : {{ $b->id}}
                        </div>
                        <div class="col-lg-10 font-weight-light" >
                            créé le : {{ $b->created_at }}
                        </div>
                    </div>
                </div>
                <div class="card-body" id="card{{$b->id}}">
                    <div class="row">
                        <div class="col-lg-5">
                            <h5 class="card-title">{{ $b->first_name_borrower }} {{ $b->surname_borrower }}</h5>
                        </div>
                        <div class="col-lg-3">
                            <h6 class="card-title">{{ $b->email_borrower }}</h6>
                        </div>
                        <div class="col-lg-3">
                            <h6 class="card-title status">status : <strong>{{ $b->status}}</strong></h6>
                        </div>
                        <div class="col-lg-1">
                            @if($b->status == 'waiting_validation')
                                <button type="button" class="btn btn-success btn-sm validation" data-borrowid="{{ $b->id }}" data-validity="true"><i class="fas fa-clipboard-check"></i></button>
                                <button type="button" class="btn btn-danger btn-sm validation" data-borrowid="{{ $b->id }}" data-validity="false"><strong>x</strong></button>
                            @endif
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-lg-5 d-flex align-items-center">
                            Equipment emprunté : <b>{{ $b->equipment->code }} - {{ $b->equipment->name }}</b>
                        </div>
                        <div class="col-lg-3 d-flex align-items-center">
                            Début : {{ $b->start_date }}
                        </div>
                        <div class="col-lg-3 d-flex align-items-center">
                            Fin : {{ $b->end_date }}
                        </div>
                        <div class="col-lg-1 d-flex align-items-center">
                            <a class="btn btn-outline-dark btn-sm mr-1" href="{{ route('borrow.edit', $b->id) }}" role="button">&#9998;</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-11">
                            <a href="{{ route('stateofborrow.return', $b->id) }}" class="btn btn-primary">Rendu</a>
                        </div>
                        <div class="col-lg-1 d-flex align-items-center">
                            <a href="{{ route('stateofborrow.delete', $b->id) }}" class="btn btn-outline-dark btn-sm mr-1"><i class="far fa-trash-alt"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@stop
@section('additionnalScript')
    <script>
        $(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.validation').click(function() {
                var borrowid = $(this).data('borrowid');
                var validity = $(this).data('validity');
                var status = "card" + borrowid;

                $.ajax({
                    url: "{{ route('stateofborrow.updateavailability') }}",
                    method: 'PUT',
                    data: {
                        borrowid: borrowid,
                        validity: validity,
                    },
                    success: function(data) {
                        $('#'+status+' .status').html(data.html);
                    }
                });
            });
        });
    </script>
@stop