@extends('layouts.app')

@section('content')
<div class="card w-3/5">
    <div class="card-head">
        <div class="font-semibold text-cyan-900 uppercase">
            <i class="fal fa-project-diagram mr-1"></i>
            Code analytique
        </div>
        <div class="text-gray-500 space-x-3">
            <a href="{{route('cp.canal.create')}}" class="hover:text-orange-500" title="Ajouter un nouveau code">
                <i class="fal fa-plus fa-lg"></i>
            </a>
            <a href="{{route('cp.canal.edit', $code->id_analytique)}}" class=" hover:text-orange-500" title="Modifier le code">
                <i class="fal fa-edit fa-lg"></i>
            </a>
            <a id="btnDelete" href="#" class=" hover:text-orange-500" title="Supprimer le code">
                <i class="fal fa-trash-alt fa-lg"></i>
            </a>
            <a href="{{route('cp.canal.index')}}" class=" hover:text-orange-500" title="Afficher la liste de codes">
                <i class="fal fa-list fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>
        <div class="card-content mb-3">
            <table class="table table-simple">
                <tr class="text-cyan-700">
                    <td class="text-left">Code</td>
                    <td class="text-left">Libellé</td>
                </tr>
                <tr class="font-bold uppercase">
                    <td>{{$code->id_analytique}}</td>
                    <td>{{$code->libelle_analytique}}</td>
                </tr>
            </table>
            <div class="flex items-center py-2 space-x-5 mt-3 border-b">
                <a href="#" class="text-gray-500">
                    @if($code->front_office == '1')
                        <span class="text-green-500"><i class="fad fa-check-circle fa-lg"></i></span>
                    @endif
                    @if($code->front_office == '0')
                        <span class="text-red-500"><i class="fad fa-times-circle fa-lg"></i></span>
                    @endif
                    Front office
                </a>
                <a href="#" class="text-gray-500">
                    @if($code->transaction == '1')
                        <span class="text-green-500"><i class="fad fa-check-circle fa-lg"></i></span>
                    @endif
                    @if($code->transaction == '0')
                        <span class="text-red-500"><i class="fad fa-times-circle fa-lg"></i></span>
                    @endif
                    Transaction
                </a>
            </div>
            <div class="flex w-full text-cyan-700 text-md mt-5 mb-2">
                {!! $code->description !!}
            </div>
        </div>
    </div>
</div>
<x-form-modal :frmModal="'frmModalCode'">
    <x-slot:title>Code analytique</x-slot>
    <div>
        Voulez vous réellement supprimer ce code analytique ?
    </div>
    <form id="frmCode" method="post" action="{{route('cp.canal.destroy', $code->id_analytique)}}">
        @csrf
    </form>
    <x-slot:footer>
        <div class="flex items-center justify-center w-full space-x-3">
            <button id="btnValide" class="btn btn-warning">
                <i class="fal fa-check mr-1"></i>
                Oui
            </button>
            <button id="btnNo" class="btn btn-dark btn-modal-close">
                <i class="fal fa-times mr-2"></i>
                Non
            </button>
        </div>
    </x-slot>
</x-form-modal>
@endsection

@section('script')

    <script>
        document.getElementById("btnDelete").addEventListener("click", function(e){
            e.preventDefault();
            Modal("#frmModalCode", "show");
        })
        document.getElementById("btnValide").addEventListener("click", function(e){
            e.preventDefault();
            document.getElementById("frmCode").submit();
        });
    </script>

@endsection