@extends('layouts.app')

@section('content')
<div class="row py-5">
    <div class="col-lg-7 mx-auto">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    {{ isset($creditPackage) ? 'Modifier un package de credit' : 'Créer un package de credit' }}

                </h5>
                @include('components.alert_success')
                <form class="form-horizontal" method="POST" action="{{ isset($creditPackage) ? route('partners.credit_packages.update', ['partner' => $partner, 'credit_package' => $creditPackage]) : route('partners.credit_packages.store', ['partner' => $partner]) }}">
                    {{ csrf_field() }}
                    {{ isset($creditPackage) ? method_field('PUT') : '' }}

                    <div class="mb-3">
                        <label for="name">Nom</label>
                        <input id="name" type="text" name="name" value="{{ old('name', $creditPackage->name ?? '') }}" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Nom">
                        @if ($errors->has('name'))
                        <div class="invalid-feedback">
                            {{ $errors->first('name') }}
                        </div>
                        @endif
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input type="hidden" name="is_disabled" value="">
                            <input id="is_disabled" type="checkbox" class="form-check-input" name="is_disabled" value="1" {{ old('is_disabled', isset($creditPackage) && $creditPackage->is_disabled ?? '') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_disabled">Désactiver le pack</label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="name">Type de pack</label>
                        <div class="form-check">
                            <input type="radio" id="type-static" name="type" value="static" class="form-check-input" checked>
                            <label class="form-check-label" for="type-static">Statique</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" id="type-open" name="type" value="open" class="form-check-input" {{ old('type') === 'open' || (old('type') === null && isset($creditPackage) && $creditPackage->type === 'open') ? 'checked' : '' }}>
                            <label class="form-check-label" for="type-open">Libre</label>
                        </div>
                    </div>

                    <div id="js-static-type" class="form-row {{ old('type') === 'open' || (old('type') === null && isset($creditPackage) && $creditPackage->type === 'open') ? 'd-none' : '' }}">
                        <div class="mb-3 col">
                            <label for="amount">Montant</label>
                            <div class="input-group mb-2">
                                <input id="amount" type="text" name="amount" value="{{ old('amount', $creditPackage->amount ?? '') }}" class="form-control {{ $errors->has('amount') ? ' is-invalid' : '' }}" placeholder="Montant">
                                <div class="input-group-append">
                                    <div class="input-group-text">€ HT</div>
                                </div>
                            </div>
                            @if ($errors->has('amount'))
                            <div class="invalid-feedback">
                                {{ $errors->first('amount') }}
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection


@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", () => {
    const $elStaticType = $('#js-static-type');

    $('input[name="type"]').on('change', (event) => {
        console.log(event.currentTarget.value)
        if(event.currentTarget.value === 'static') {
            $elStaticType.removeClass('d-none');
        } else {
            $elStaticType.addClass('d-none');
        }
    })
});

</script>
@endpush