@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($smsPackage) ? 'Modifier un package SMS' : 'Créer un package SMS' }}

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

                    <div class="mb-3">
                        <label for="name">Nom</label>
                        <input id="name" type="text" name="name" value="{{ old('name', $smsPackage->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($smsPackage) && $smsPackage->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 campagne</label>
                        <div class="form-check">
                            <input type="radio" id="campaign-type-prosp" name="campaign_type" value="prosp" class="form-check-input" checked>
                            <label class="form-check-label" for="campaign-type-prosp">Prospection</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" id="campaign-type-fid" name="campaign_type" value="fid" class="form-check-input" {{ old('campaign_type') === 'fid' || (old('type') === null && isset($smsPackage) && $smsPackage->campaign_type === 'fid') ? 'checked' : '' }}>
                            <label class="form-check-label" for="campaign-type-fid">Fidélisation</label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="name">Type de pack</label>
                        <div class="form-check">
                            <input type="radio" id="type-volume" name="type" value="volume" class="form-check-input" checked>
                            <label class="form-check-label" for="type-volume">Volume</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" id="type-step" name="type" value="step" class="form-check-input" {{ old('type') === 'step' || (old('type') === null && isset($smsPackage) && $smsPackage->type === 'step') ? 'checked' : '' }}>
                            <label class="form-check-label" for="type-step">Paliers</label>
                        </div>
                    </div>

                    <div id="js-volume" class="form-row {{ old('type') === 'step' || (old('type') === null && isset($smsPackage) && $smsPackage->type === 'step') ? 'd-none' : '' }}">
                        <div class="mb-3 col">
                            <label for="volume">Volume</label>
                            <input id="volume" type="text" name="volume" value="{{ old('volume', $smsPackage->volume ?? '') }}" class="form-control {{ $errors->has('volume') ? ' is-invalid' : '' }}" placeholder="Volume">
                            @if ($errors->has('volume'))
                            <div class="invalid-feedback">
                                {{ $errors->first('volume') }}
                            </div>
                            @endif
                        </div>

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

                    <div id="js-steps" class="mb-5 {{ old('type') === 'volume' || (old('type') === null && !isset($smsPackage)) || (old('type') === null &&  isset($smsPackage) && $smsPackage->type === 'volume') ? 'd-none' : '' }}">
                        <div class="js-step form-row">
                            <div class="col-6">
                                <label for="volume">Volume</label>
                            </div>

                            <div class="col-6">
                                <label for="sms_price">Prix du SMS</label>
                            </div>
                        </div>

                        @if(isset($smsPackage) && $smsPackage->type === 'step')
                            @foreach($smsPackage->steps()->orderBy('volume')->get() as $step)
                                @include('pages.partner.sms_package.step_form_template', ['step' => $step])
                            @endforeach
                        @endif

                        <div class="text-center">
                            <button id="js-add-step" type="button" class="btn btn-light"><i class="fas fa-plus" aria-hidden="true"></i> Ajouter un palier</button>
                        </div>
                    </div>


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

<div id="js-step-template" class="d-none">
    @include('pages.partner.sms_package.step_form_template', ['step' => null])
</div>
@endsection


@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", () => {
    const $elAddStep = $('#js-add-step');
    const $eltemplateSteps = $('#js-step-template');
    const $elSteps = $('#js-steps');
    const $elVolume = $('#js-volume');

    $elSteps.on('click', '.js-delete-step', (event) => {
        event.target.closest('.js-step').remove();
    });

    $elAddStep.on('click', () => {
        $elSteps.find('.js-step').last().after($eltemplateSteps.find('.form-row').clone());
    });

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

</script>
@endpush