@extends('layout.app')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title" style="color:#115548;">
                                <i class="fa fa-plus-circle"></i> Create Payment Issue
                            </h3>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('payment-issue.store') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Issue Type <span class="text-danger">*</span></label>
                                            <select name="payment_issue_type_id" id="issue_type_select"
                                                class="form-control select2 @error('payment_issue_type_id') is-invalid @enderror" required>
                                                <option value="">-- Select Type --</option>
                                                @foreach ($types as $type)
                                                    <option value="{{ $type->id }}"
                                                        data-name="{{ $type->name }}"
                                                        {{ old('payment_issue_type_id') == $type->id ? 'selected' : '' }}>
                                                        {{ $type->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('payment_issue_type_id')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-user_id">
                                        <div class="form-group">
                                            <label>CID <span class="text-danger">*</span></label>
                                            <input type="text" name="user_id" id="user_id"
                                                class="form-control @error('user_id') is-invalid @enderror"
                                                value="{{ old('user_id') }}"
                                                placeholder="Enter CID">
                                            @error('user_id')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-transfer_user_id">
                                        <div class="form-group">
                                            <label>Transfer to ID <span class="text-danger">*</span></label>
                                            <input type="text" name="transfer_user_id" id="transfer_user_id"
                                                class="form-control @error('transfer_user_id') is-invalid @enderror"
                                                value="{{ old('transfer_user_id') }}"
                                                placeholder="Enter transfer user ID">
                                            @error('transfer_user_id')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-amount">
                                        <div class="form-group">
                                            <label>Amount <span class="text-danger">*</span></label>
                                            <input type="number" name="amount" step="0.01" min="0"
                                                class="form-control @error('amount') is-invalid @enderror"
                                                value="{{ old('amount') }}">
                                            @error('amount')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-trnx_id">
                                        <div class="form-group">
                                            <label>Trnx ID <span class="text-danger">*</span></label>
                                            <input type="text" name="trnx_id"
                                                class="form-control @error('trnx_id') is-invalid @enderror"
                                                value="{{ old('trnx_id') }}">
                                            @error('trnx_id')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-trnx_type">
                                        <div class="form-group">
                                            <label>Trnx Type</label>
                                            <select name="trnx_type"
                                                class="form-control @error('trnx_type') is-invalid @enderror">
                                                <option value="">-- Select --</option>
                                                @foreach (['Bkash', 'Nagad'] as $trnxType)
                                                    <option value="{{ $trnxType }}"
                                                        {{ old('trnx_type') == $trnxType ? 'selected' : '' }}>
                                                        {{ $trnxType }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('trnx_type')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-attachment">
                                        <div class="form-group">
                                            <label>Attachment <span class="text-danger">*</span>
                                                <small class="text-muted">(jpg, png, pdf — max 5MB)</small></label>
                                            <input type="file" name="attachment"
                                                class="form-control @error('attachment') is-invalid @enderror"
                                                accept=".jpg,.jpeg,.png,.pdf">
                                            @error('attachment')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-days">
                                        <div class="form-group">
                                            <label>Days <span class="text-danger">*</span></label>
                                            <input type="number" name="days" min="0"
                                                class="form-control @error('days') is-invalid @enderror"
                                                value="{{ old('days', 0) }}">
                                            @error('days')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-none" id="field-description">
                                        <div class="form-group">
                                            <label>Description <span class="text-danger">*</span></label>
                                            <input type="text" name="description"
                                                class="form-control @error('description') is-invalid @enderror"
                                                value="{{ old('description') }}"
                                                placeholder="Enter description...">
                                            @error('description')<span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>


                                </div>

                                <div class="d-flex justify-content-between mt-2">
                                    <a href="{{ route('payment-issue.index') }}" class="btn btn-secondary">
                                        <i class="fa fa-arrow-left"></i> Back
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-save"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('ajax')
    <script>
        $(document).ready(function () {

            // Which fields to show per type name
            var fieldMap = {
                'Balance Transfer Issue':          ['user_id', 'transfer_user_id', 'amount', 'trnx_id', 'trnx_type', 'attachment'],
                'Balance Not Updated':             ['user_id', 'amount', 'trnx_id', 'trnx_type', 'attachment'],
                'Date Extension Request':          ['user_id', 'days'],
                'Partial Billing Date Adjustment': ['user_id', 'amount', 'days'],
                'Other Billing Issue':             ['description'],
            };

            var allFields = ['user_id', 'transfer_user_id', 'amount', 'trnx_id', 'trnx_type', 'attachment', 'days', 'description'];

            // Required fields per type
            var requiredMap = {
                'Balance Transfer Issue':          ['user_id', 'transfer_user_id', 'amount', 'trnx_id', 'attachment'],
                'Balance Not Updated':             ['user_id', 'amount', 'trnx_id', 'attachment'],
                'Date Extension Request':          ['user_id', 'days'],
                'Partial Billing Date Adjustment': ['user_id', 'amount', 'days'],
                'Other Billing Issue':             ['description'],
            };

            function applyType(typeName) {
                var show = fieldMap[typeName] || [];
                var required = requiredMap[typeName] || [];

                $.each(allFields, function (i, key) {
                    var $col = $('#field-' + key);
                    var $input = $col.find('input, select, textarea').first();

                    if (show.indexOf(key) !== -1) {
                        $col.removeClass('d-none');
                        if (required.indexOf(key) !== -1) {
                            $input.attr('required', true);
                        } else {
                            $input.removeAttr('required');
                        }
                    } else {
                        $col.addClass('d-none');
                        $input.removeAttr('required');
                    }
                });
            }

            $('#issue_type_select').on('change', function () {
                var typeName = $(this).find('option:selected').data('name') || '';
                applyType(typeName);
            });

            // Trigger on page load if old() value is selected
            var oldTypeName = $('#issue_type_select').find('option:selected').data('name') || '';
            if (oldTypeName) {
                applyType(oldTypeName);
            }
        });
    </script>
@endsection