@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">
            <a href="{{route('cp.canal.index')}}" class=" hover:text-orange-500 mr-2">
                <i class="fal fa-list fa-lg"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>
        <div class="card-content">

            <form id="frmCode" method="post" action="{{$url}}">
                <div class="space-y-4 mb-3">
                        @csrf
                        <div>
                            <div class="text-sm text-gray-500">
                                Code
                            </div>
                            <div>
                                <input type="text" name="codeAnal" value="{{ !empty($code->id_analytique) ? $code->id_analytique : old('codeAnal')  }}"
                                @if(!empty($code->id_analytique)) readonly @endif
                                class="form-control" required>
                                @error('codeAnal')
                                    <span class="text-red-500 text-sm">{{$message}}</span>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">
                                Libellé
                            </div>
                            <div>
                                <input type="text" name="libelle" value="{{!empty($code->libelle_analytique)?$code->libelle_analytique:old('libelle')}}" class="form-control" required>
                                @error('libelle')
                                    <span class="text-red-500 text-sm">{{$message}}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="flex space-x-5 border-b border-t py-2">
                            <div class="flex items-center">
                                <div class="mr-2">
                                    <input type="checkbox" class="checkbox" name="frontOffice" @if(!empty($code->front_office)) checked @endif>
                                </div>
                                <div class="text-sm text-gray-500">Front-office</div>
                            </div>
                            <div class="flex items-center">
                                <div class="mr-2">
                                    <input type="checkbox" class="checkbox" name="transaction" @if(!empty($code->transaction)) checked @endif>
                                </div>
                                <div class="text-sm text-gray-500">Transaction</div>
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">
                                Description
                            </div>
                            <div>
                                <textarea name="description" class="form-control" placeholder="La description de compte">{{!empty($code->description)?$code->description:old('description')}}</textarea>
                            </div>
                        </div>
                </div>
            </form>
        </div>
        <div class="mt-3">
            <button class="msg-box-show btn btn-warning">
                <i class="fal fa-save mr-1"></i>
                Enregistrer
            </button>

            <a href="{{route('cp.canal.index')}}" class="inline-block btn btn-dark">
                <i class="fal fa-times mr-1"></i>
                Annuler
            </a>
        </div>
    </div>
</div>
<x-msg-box>
    <x-slot name="title">
        Code analytique
    </x-slot>
    Voulez vous réellement enregister ce code analytique ?
</x-msg-box>
@endsection

@section('script')
    <script>
        document.getElementById("frmCode").addEventListener("submit", function(e){
            e.preventDefault();
        });

        document.querySelector(".msg-box-show").addEventListener("click", function(e){
            e.preventDefault();
            Modal("#MsgBox", "show");
            document.getElementById("btnYes").focus();
        })
        document.getElementById("btnYes").addEventListener("click", function(e){
            e.preventDefault();
            document.getElementById("frmCode").submit();
        });
    </script>
@endsection