@extends('layouts.master')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">Disputes <span class="text-muted">Add</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_ecommerce_settings_edit" role="tabpanel">
                            <form id="kt_ecommerce_settings_edit_form" class="form" action="{{ route('Disputes.store') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="STATUS" value="NEW">
                                <input type="hidden" name="SUB_STATUS" value="Pending">
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">CATEGORY</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="w-100">
                                            <select class="form-select form-select-solid" name="DEPT" id="DEPT"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Select Category">
                                                <option value="">Select Category</option>
                                                <option value="Card Not Working"
                                                    {{ old('DEPT') == 'Card Not Working' ? 'selected' : '' }}>Card Not
                                                    Working</option>
                                                <option value="General Question"
                                                    {{ old('DEPT') == 'General Question' ? 'selected' : '' }}>General
                                                    Question</option>
                                                </option>
                                                <option value="Wire Not Posted"
                                                    {{ old('DEPT') == 'Wire Not Posted' ? 'selected' : '' }}>Wire Not Posted
                                                </option>
                                                <option value="Dispute charge"
                                                    {{ old('DEPT') == 'Dispute charge' ? 'selected' : '' }}>Dispute charge
                                                </option>
                                            </select>
                                            @error('DEPT')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">SUBJECT</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="TITLE"
                                            id="TITLE" value="{{ old('TITLE') }}">
                                        @if ($errors->has('TITLE'))
                                            <span class="text-danger">{{ $errors->first('TITLE') }}</span>
                                        @endif
                                    </div>
                                </div>
                            <div class="row">
                          
                            <div class="col-md-3">
                            </div>
                                <div class="col-md-4">
                                  <div class="row fv-row mb-7" id="cardnodiv">
                                        <!-- <div class="col-md-4 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Card Number</span>
                                        </label>
                                    </div> -->
                                    <div class="col-md-10">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Card Number</span>
                                        </label>
                                    <select class="form-select form-select-solid" name="card_number" id="card_number"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Select Card No">
                                                <option value="">Please Select</option>
                                                @foreach ($card_nos as $card_no)                                               
                                               
                                                <option value="{{$card_no->CARD_NO}}"
                                                    {{ old('card_number') == $card_no->CARD_NO ? 'selected' : '' }}>{{$card_no->CARD_NO}}</option>
                                                    @endforeach
                                     </select>                                      
                                        @if ($errors->has('card_number'))
                                            <span class="text-danger">{{ $errors->first('card_number') }}</span>
                                        @endif
                                    </div>
                                </div>
                                </div>
                                
                                 <div class="col-md-3">
                                <div class="row fv-row mb-7 hidediv">
                                            <!-- <div class="col-md-5 text-md-end">
                                            
                                            <label class="fs-6 fw-semibold form-label mt-3 hidediv">
                                                <span class="required">Transaction Date
                                                </span>
                                            </label>
                                </div> -->
                                    <div class="col-md-12 hidediv">
                                    <label class="fs-6 fw-semibold form-label mt-3 hidediv">
                                                <span class="required">Transaction Date
                                                </span>
                                            </label>
                                        <input type="datetime-local" class="form-control form-control-solid" name="transaction_date"
                                            id="transaction_date" value="{{ old('transaction_date') }}">
                                        @if ($errors->has('transaction_date'))
                                            <span class="text-danger">{{ $errors->first('transaction_date') }}</span>
                                        @endif
                                    </div>
                                </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row fv-row mb-7 hidediv">
                                        <!-- <div class="col-md-6 text-md-end">
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <span class="required">Dispute amount</span>
                                            </label>
                                        </div> -->
                                        <div class="col-md-12">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                                <span class="required">Dispute amount</span>
                                            </label>
                                            <input type="text" class="form-control form-control-solid" name="dispute_amount"
                                                id="dispute_amount" value="{{ old('dispute_amount') }}">
                                            @if ($errors->has('dispute_amount'))
                                                <span class="text-danger">{{ $errors->first('dispute_amount') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">SUMMARY</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <textarea name="MESSAGE" id="MESSAGE" class="form-control form-control-solid" cols="30" rows="5"
                                            ></textarea>
                                        @if ($errors->has('MESSAGE'))
                                            <span class="text-danger">{{ $errors->first('MESSAGE') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="">UPLOAD FILES</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control form-control-solid" name="DOCUMENTS"
                                            value="" />
                                        @error('DOCUMENTS')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row py-5">
                                    <div class="col-md-9 offset-md-3">
                                        <div class="d-flex">
                                            <a href="{{ route('Disputes.index') }}" class="btn btn-light me-2">Cancel</a>
                                            <button type="submit" data-kt-ecommerce-settings-type="submit"
                                                class="btn btn-primary" id="submit">
                                                <span class="indicator-label">Save</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
          $(document).ready(function () {
                      
            $('.hidediv').hide();        
                $('#cardnodiv').hide();
            $('#DEPT').on('change', function () {
                const selectedValue = $(this).val();
               
                if (selectedValue === 'Dispute charge') {
                    $('.hidediv').show();        
                    $('#cardnodiv').show();
                } else if (selectedValue === 'Card Not Working') {     
                    $('.hidediv').hide();      
                    $('#cardnodiv').show();     
                } else {
                    $('.hidediv').hide();      
                    $('#cardnodiv').hide();  
                    $('#transaction_date').val('');
                    $('#dispute_amount').val(''); 
                    $('#card_number').val('').trigger('change');
                }
            });

           var selectedValue = $('#DEPT').val();
               
            if (selectedValue === 'Dispute charge') {
                    $('.hidediv').show();        
                    $('#cardnodiv').show();
                } else if (selectedValue === 'Card Not Working') {     
                    $('.hidediv').hide();      
                    $('#cardnodiv').show();     
                } else {
                    $('.hidediv').hide();      
                    $('#cardnodiv').hide();  
                    $('#transaction_date').val('');
                    $('#dispute_amount').val(''); 
                    $('#card_number').val('').trigger('change');
                }
    });
    </script>
@endsection()