@extends('layouts.app') {{-- Include the layout --}}

@section('content')
@include('loader')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Branches</div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    @if (isset($error_message))
                        <div class="alert alert-danger custom-alert">
                            {{ isset($error_message) ? $error_message : '' }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateBranch') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="form-group">
                            
                             <select name="branch_id" id="branch_id" class="form-control">
                                
                                <option value="">Select Branch to Fill Data</option>
                                
                                @foreach($branchlist as $branch)
                                
                                    @php
                                        $selectoption = (isset($branch_id) && $branch_id == $branch->id) ? 'selected' : '';
                                    @endphp
                                
                                    <option value="{{ $branch->id }}" {{ $selectoption }}>{{ $branch->name }}</option>
                                @endforeach
                                
                            </select>
                            
                        </div>
                        
                        
                        <div class="form-group">
                            <label for="name">Name <span class="text-danger">*</span></label> 
                            <input type="text" id="name" name="name" class="form-control" value="{{ isset($name) ? $name : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter branch name.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="slogan">Slogan</label> 
                            <input type="text" id="slogan" name="slogan" class="form-control" value="{{ isset($slogan) ? $slogan : '' }}" >
                            <div class="invalid-feedback">
                                Please enter branch slogan.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="pdf_name">Branch Name for PDF<span class="text-danger">*</span></label> 
                            <input type="text" id="pdf_name" name="pdf_name" class="form-control" value="{{ isset($pdf_name) ? $pdf_name : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter name for PDF.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone1">Phone 1</label> 
                            <input type="text" id="phone1" name="phone1" class="form-control" value="{{ isset($phone1) ? $phone1 : '' }}">
                            <div class="invalid-feedback">
                                Please enter phone.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone2">Phone 2</label> 
                            <input type="text" id="phone2" name="phone2" class="form-control" value="{{ isset($phone2) ? $phone2 : '' }}">
                        </div>
                        
                        
                        <div class="form-group">
                            <label for="email1">Email 1</label> 
                            <input type="text" id="email1" name="email1" class="form-control" value="{{ isset($email1) ? $email1 : '' }}">
                            <div class="invalid-feedback">
                                Please enter email.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="email2">Email 2</label> 
                            <input type="text" id="email2" name="email2" class="form-control" value="{{ isset($email2) ? $email2 : '' }}">
                        </div>

                        <div class="form-group">
                            <label for="country">Country <span class="text-danger">*</span></label> 
                             <select name="country" id="country" class="form-control" required>
                                
                                <option value="">Select Country</option>
                                
                                @foreach($countrieslist as $list)
                                        
                                    @php
                                        $select = (isset($country) && $country == $list->value) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->value }}"  {{$select}}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            <div class="invalid-feedback">
                                Please select country.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="city">City <span class="text-danger">*</span>
                                <i class="fa-solid fa-circle-plus " style="font-size: 18px; color: rgb(16, 196, 105);cursor:pointer" data-bs-toggle="modal" data-bs-target="#cityModal"></i>
                            </label> 
                             <select name="cityid" id="cityid" class="form-control" required>
                                
                                <option value="">Select City</option>
                                
                                @foreach($citylist as $list)
                                        
                                    @php
                                        $select = (isset($city) && $city == $list->value) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->value }}"  {{$select}}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            <div class="invalid-feedback">
                                Please select city.
                            </div>
                        </div>
                        
                        
                        
                        <div class="form-group">
                            <label for="state">State </label> 
                            <input type="text" id="state" name="state" class="form-control" value="{{ isset($state) ? $state : '' }}" >
                            <div class="invalid-feedback">
                                Please enter state.
                            </div>
                        </div>
                        
                        
                        
                        <div class="form-group">
                            <label for="zipcode">Zip Code</label>
                            <input type="text" id="zipcode" name="zipcode" class="form-control" value="{{ isset($zipcode) ? $zipcode : '' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="address">Address 1</label> 
                            <textarea type="text" id="address1" name="address1" class="form-control" >{{ isset($address1) ? $address1 : '' }}</textarea>
                            <div class="invalid-feedback">
                                Please enter address.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="address2">Address 2</label> 
                            <textarea type="text" id="address2" name="address2" class="form-control" >{{ isset($address2) ? $address2 : '' }}</textarea>
                            
                        </div>
                                
                        <div class="form-group">
                            <label for="status">Status <span class="text-danger">*</span></label> 
                            <select name="status" id="status" class="form-control" required>
                            
                                 @php
                                        $select1 = (isset($status) && $status == 0) ? 'selected' : '';
                                        $select2 = (isset($status) && $status == 1) ? 'selected' : '';
                                @endphp
                            
                                <option value="0" {{ $select1 }}>Active</option>
                                <option value="1" {{ $select2 }}>Inactive</option>
                            </select>
                            <div class="invalid-feedback">
                                Please select status.
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="setdefault">Set as default <span class="text-danger">*</span></label> 
                            <select name="setdefault" id="setdefault" class="form-control" required>
                            
                                 @php
                                        $select1 = (isset($setdefault) && $setdefault == 0) ? 'selected' : '';
                                        $select2 = (isset($setdefault) && $setdefault == 1) ? 'selected' : '';
                                @endphp
                            
                                <option value="0" {{ $select1 }}>No</option>
                                <option value="1" {{ $select2 }}>Yes</option>
                            </select>
                            <div class="invalid-feedback">
                                Please select default branch.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="cashcustomerid">Cash Customer </label> 
                             <select name="cashcustomerid" id="cashcustomerid" class="form-control">
                                
                                <option value="0">Select Customer</option>
                                
                                @foreach($customerslist as $list)
                                        
                                    @php
                                        $select = (isset($cashcustomerid) && $cashcustomerid == $list->value) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->value }}"  {{$select}}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            <div class="invalid-feedback">
                                Please select city.
                            </div>
                        </div>

                        

                        <div class="form-group">
                            <label for="currencyid">Default Currency </label> 
                             <select name="currencyid" id="currencyid" class="form-control" required>
                                
                                <option value="">Select Currency</option>
                                
                                @foreach($currencylist as $list)
                                        
                                    @php
                                        $select = (isset($currencyid) && $currencyid == $list->id) ? 'selected' : '';
                                    @endphp
                                        
                                    <option value="{{ $list->id }}"  {{$select}}>{{ $list->name }}</option>
                                @endforeach
                                
                            </select>
                            <div class="invalid-feedback">
                                Please select default currency.
                            </div>
                        </div>

                        
                        <div class="form-group">
                            <label for="otherlanguage">Other Language</label> 
                            <select name="otherlanguage" id="otherlanguage" class="form-control">
                                <option value="">Select</option>
                                @php
                                        $selectlang = (isset($otherlanguage) && $otherlanguage == 'urdu') ? 'selected' : '';
                                        
                                @endphp
                                <option value="urdu" {{ $selectlang }}>Urdu</option>
                            </select>
                                
                        </div>
                        
                        
                        <div class="form-group">
                            <label for="mainlogo">Logo</label>
                            <!--<input type="file" id="mainlogo" name="mainlogo" class="form-control" accept=".jpg, .jpeg, .png" {{ isset($logo) && isset($logopath) ? '' : 'required' }} onchange="previewLogo(this, 'mainlogo-preview')">-->
                            <input type="file" id="mainlogo" name="mainlogo" class="form-control" accept=".jpg, .jpeg, .png"  onchange="previewLogo(this, 'mainlogo-preview')">
                            <div class="invalid-feedback">
                                Please add logo.
                            </div>
                            <br>
                            <div id="mainlogo-preview" class="logo-preview" >
                                @if(isset($logo) && isset($logopath))
                                    <img src="{{ asset($logopath) }}" alt="Main Logo" width="150" height="150">
                                    <i class="fa-solid fa-trash" style="font-size: 18px; color: rgb(220, 53, 69); cursor:pointer" onclick="removeLogo()"></i>
                                @endif
                            </div>
                        </div>

                        <input type="hidden" name="logo_removed" id="logo_removed" value="0">
                        
                        <br>
                        
                        <div style="text-align:right">
                            <a href="{{ route('branches') }}"><button type="button" class="btn btn-primary">Back</button></a>
                            <button type="submit" class="btn btn-success" id="savebtn">{{ isset($branchid) ? 'Update' : 'Add' }}</button>
                             
                        </div> 
                        
                        <input type="hidden" name="branchid" value="{{ isset($branchid) ? $branchid : '' }}" >
                        
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="cityModal" tabindex="-1" aria-labelledby="cityModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cityModalLabel">Add City</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="cityName" class="form-label">City Name</label>
            <input type="text" class="form-control" id="cityName" placeholder="Enter city name">
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" id="saveCityBtn">Save</button>
      </div>
    </div>
  </div>
</div>


<script>




$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});

$("#branch_id").change(function() {
    
    var branch_id=$('#branch_id').val();
    
    if(branch_id>0)
    {
        
        $.ajax({
            type: 'GET',
            url: '{{ route('getBranchInfo', '') }}/' + branch_id,
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function(response) {
                
                console.log(response);
                
                $('#name').val(response.name);
                $('#slogan').val(response.slogan);
                $('#pdf_name').val(response.pdf_name);
                $('#phone1').val(response.phone1);
                $('#phone2').val(response.phone2);
                $('#email1').val(response.email1);
                $('#email2').val(response.email2);
                $('#cityid').val(response.city);
                $('#state').val(response.state);
                $('#country').val(response.country);
                $('#zipcode').val(response.zip);
                $('#address1').val(response.address1);
                $('#address2').val(response.address2);
                $('#status').val(response.inactive);
                $('#cashcustomerid').val(response.cashcustomerid);
                $('#currencyid').val(response.currencyid);
                displayImage(response.logopath);
                
                
            },
            error: function(error) {
                console.error('Error deleting the item', error);
            }
        });
                
    }else {
            $('#name').val('');
            $('#slogan').val('');
            $('#pdf_name').val('');
            $('#phone1').val('');
            $('#phone2').val('');
            $('#email1').val('');
            $('#email2').val('');
            $('#cityid').val('');
            $('#state').val('');
            $('#country').val('');
            $('#zipcode').val('');
            $('#address1').val('');
            $('#address2').val('');
            $('#status').val(0);
            $('#cashcustomerid').val(0);
            $('#currencyid').val(0);
            displayImage('');
    }
    
});

$("#country").change(function() {
    var countryid = $('#country').val();

    if (countryid > 0) {

        LoadingStart();

        $.ajax({
            type: 'GET',
            url: '{{ route('getCountryWiseCity', '') }}/' + countryid,
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function(response) {
                
                $('#cityid').html(response.options);

                LoadingStop();
            },
            error: function(error) {
                console.error('Error fetching cities', error);
            }
        });
    }
});


function previewLogo_old(input, previewId) {
    const previewContainer = document.getElementById(previewId);
    const file = input.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            // Remove previous preview, if any
            previewContainer.innerHTML = '';

            const previewImage = document.createElement('img');
            previewImage.src = e.target.result;
            previewImage.alt = 'Logo Preview';
            previewImage.width = 150;
            previewImage.height = 150;
            previewContainer.appendChild(previewImage);
        };

        reader.readAsDataURL(file);
    }
}

function displayImage_old(imagePath) {
    const previewContainer = document.getElementById('mainlogo-preview');
    const fileInput = document.getElementById('mainlogo');

    if (imagePath) {
        // Remove previous preview, if any
        previewContainer.innerHTML = '';

        const previewImage = document.createElement('img');
        previewImage.src = imagePath;
        previewImage.alt = 'Logo Preview';
        previewImage.width = 150;
        previewImage.height = 150;
        previewContainer.appendChild(previewImage);
        
        fileInput.removeAttribute('required');
        
    }
    else{
        previewContainer.innerHTML = '';
        fileInput.setAttribute('required', 'required');
    }
}

function previewLogo(input, previewId) {
    const previewContainer = document.getElementById(previewId);
    const file = input.files[0];
    const logoRemovedInput = document.getElementById('logo_removed');

    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();

        reader.onload = function (e) {
            previewContainer.innerHTML = '';

            const previewImage = document.createElement('img');
            previewImage.src = e.target.result;
            previewImage.alt = 'Logo Preview';
            previewImage.width = 150;
            previewImage.height = 150;
            previewContainer.appendChild(previewImage);

            const deleteIcon = document.createElement('i');
            deleteIcon.className = 'fa-solid fa-trash';
            deleteIcon.style.fontSize = '18px';
            deleteIcon.style.color = 'rgb(220, 53, 69)';
            deleteIcon.style.cursor = 'pointer';
            deleteIcon.onclick = removeLogo;
            previewContainer.appendChild(deleteIcon);
        };

        logoRemovedInput.value = '0';
        reader.readAsDataURL(file);
    }
}

function removeLogo() {
    const previewContainer = document.getElementById('mainlogo-preview');
    const fileInput = document.getElementById('mainlogo');
    const logoRemovedInput = document.getElementById('logo_removed');

    previewContainer.innerHTML = '';
    fileInput.value = '';
    logoRemovedInput.value = '1';
}


function displayImage(imagePath) {
    const previewContainer = document.getElementById('mainlogo-preview');
    const fileInput = document.getElementById('mainlogo');

    if (imagePath) {
        // Remove previous preview, if any
        previewContainer.innerHTML = '';

        const previewImage = document.createElement('img');
        previewImage.src = imagePath;
        previewImage.alt = 'Logo Preview';
        previewImage.width = 150;
        previewImage.height = 150;
        previewContainer.appendChild(previewImage);

        const deleteIcon = document.createElement('i');
        deleteIcon.className = 'fa-solid fa-trash';
        deleteIcon.style.fontSize = '18px';
        deleteIcon.style.color = 'rgb(220, 53, 69)';
        deleteIcon.style.cursor = 'pointer';
        deleteIcon.onclick = removeLogo;
        previewContainer.appendChild(deleteIcon);

        //fileInput.removeAttribute('required');
    } else {
        previewContainer.innerHTML = '';
        //fileInput.setAttribute('required', 'required');
    }
}

function removeLogo() {
    const previewContainer = document.getElementById('mainlogo-preview');
    const fileInput = document.getElementById('mainlogo');
    const logoRemovedInput = document.getElementById('logo_removed');

    previewContainer.innerHTML = '';
    fileInput.value = '';
    logoRemovedInput.value = '1';
}



$(document).ready(function () {
  $('#saveCityBtn').click(function () {
    // Get the input value
    var cityName = $('#cityName').val().trim();
    var country = $('#country').val();
    

    // Validate the input
    if (cityName === '') {
      $('#cityName').addClass('is-invalid');
    }
    else if (country === '' || country === null) {
        Swal.fire({
              icon: 'error',
              title: 'Error',
              text: 'Please select country first!'
            });
    }
    else {
      $('#cityName').removeClass('is-invalid');
      // AJAX call to save the city
      $.ajax({
        url: '{{ route("addCity") }}',
        type: 'POST',
        dataType: 'json',
        data: {
          cityname: cityName,
          country: country,
          _token: '{{ csrf_token() }}' // CSRF token for security
        },
        success: function (response) {
          if (response.status === 200) {

            $('#cityName').val('');

            Swal.fire({
              icon: 'success',
              title: 'Success',
              text: response.message,
              timer: 2000,
              showConfirmButton: false
            });

            // Add new city to the select dropdown
            $('#cityid').append(`<option value="${response.city.value}" selected>${response.city.label}</option>`);

            // Close the modal and reset the form
            $('#cityModal').modal('hide');
            $('#cityForm')[0].reset();
          }
        },
        error: function (xhr, status, error) {
          if (xhr.status === 409) {
            Swal.fire({
              icon: 'warning',
              title: 'Warning',
              text: xhr.responseJSON.message
            });
          } else {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: 'An error occurred while adding the city.'
            });
          }
        }
      });
    }
  });

  // Remove validation message on input change
  $('#cityName').on('input', function () {
    if ($(this).val().trim() !== '') {
      $(this).removeClass('is-invalid');
    }
  });
});



</script>

@endsection